Babel.js 如何在Jest测试中使用webpack的html-loader导入？

nfzehxib 于 2022-12-08 发布在 Babel

关注(0)|答案(5)|浏览(170)

我刚刚开始使用Jest测试框架，虽然直接的单元测试工作正常，但我在测试其模块（通过Babel+Webpack的ES模块）中需要HTML文件的任何组件时遇到了大量问题。
以下是一个示例：

import './errorHandler.scss';
import template from './errorHandler.tmpl';

class ErrorHandler {
    ...

我正在加载组件特定的SCSS文件，该文件已在Jest的package.json配置中设置为返回一个空对象，但当Jest尝试运行import template from './errorHandler.tmpl';行时，它中断，并显示：

/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
                                                                                         ^
    SyntaxError: Unexpected token <

        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

我在package.json中的Jest配置如下所示：

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
    "moduleDirectories": ["node_modules"],
    "moduleFileExtensions": ["js", "json", "html", "scss"],
    "moduleNameMapper": {
        "^.+\\.scss$": "<rootDir>/test/styleMock.js"
    }
}

看起来webpack html-loader在Jest中不能正常工作，但我找不到任何解决方案来解决这个问题。
有没有人知道我如何让这些html-loaderimport在我的测试中工作？它们加载了我的lodash模板标记，我宁愿在我的.js文件中没有这些大量的HTML块，这样我就可以省略import template from x部分。
PS：这不是一个react项目，只是普通的webpack，babel，es6。

babeljs

来源：https://stackoverflow.com/questions/39483893/how-can-i-use-my-webpacks-html-loader-imports-in-jest-tests

5条答案

按热度按时间

eqzww0vc1#

我最近遇到了这个特殊的问题，创建自己的转换预处理器将解决它。这是我的设置：

软件包.json

"jest": {
    "moduleFileExtensions": [
      "js",
      "html"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
    }
 }

注意：默认情况下通常会包含babel-jest，但是如果您指定了一个自定义转换预处理器，则似乎必须手动包含它。

测试/实用程序/html加载程序.js：

const htmlLoader = require('html-loader');

module.exports = {
    process(src, filename, config, options) {
        return htmlLoader(src);
    }
}

赞(0）回复(0）举报 2022-12-08

km0tfn4u2#

有点晚的党，但想补充说，也有这个html-loader-jest npm包有这样做，如果你想走这条路。
一旦你安装了npm，你就可以用

"transform": {
        "^.+\\.js$": "babel-jest",
        "^.+\\.html?$": "html-loader-jest"
    }

赞(0）回复(0）举报 2022-12-08

des4xlb03#

对于Jest〉28.x.x（带有html-loader）：
1.按照此处所述创建自定义转换器。
第一个
1.将其添加到您的jest配置中。
第一次
它将修复错误：* 无效的返回值：在““处找到的代码转换器的process()或/和processAsync()方法应返回一个对象或解析为对象的Promise。*

赞(0）回复(0）举报 2022-12-08

mo49yndu4#

也许您自己的预处理程序文件将是解决方案：
脚本预处理程序
自定义预处理器
脚本预处理器：从预处理源文件提供同步函数的模块的路径。例如，如果你想在你的模块或测试中使用一个节点还不支持的新语言特性（比如，ES6类），你可以在这里插入一个编译ES6到ES5的transpiler。
我创建了我自己的预处理器，当我有一个问题，我的测试后，添加transform-decorators-legacy到我的webpack模块加载器。

赞(0）回复(0）举报 2022-12-08

disbfnqx5#

html-loader-jest对我不起作用。我的解决方法是：

"transform": {
  '\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}

htmlTemplateMock.html是空文件

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js 如何在Jest测试中使用webpack的html-loader导入？

5条答案

相关问题

热门标签

最新问答