import - 如何在 Jest 测试中使用我的 webpack 的 html-loader 导入？

Question

我刚刚开始使用 Jest 测试框架，虽然直接单元测试工作正常，但我在测试其模块中的任何组件(通过 babel+webpack 的 ES 模块)需要 HTML 文件时遇到大量问题。

这是一个例子:

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

class ErrorHandler {
    ...

我正在加载我在 Jest 的 package.json 中设置的组件特定 SCSS 文件配置返回一个空对象，但是当 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)

我的 Jest 配置来自 package.json如下:

"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-loader import在我的测试中工作吗？他们加载我的 lodash 模板标记，我宁愿在我的 .js 中不时有这些大量的 HTML block 。文件，所以我可以省略 import template from x部分。

PS:这不是一个 React 项目，只是普通的 webpack、babel、es6。

Answer 1

我最近遇到了这个特定问题并创建了自己的transform preprocesser将解决它。这是我的设置:

包.json

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

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

测试/utils/htmlLoader.js:

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

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