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

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

这是一个例子：

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

class ErrorHandler {
    ...

我正在加载我在Jest的package.json配置中设置的组件特定的SCSS文件,以返回一个空对象,但是当Jest尝试从’./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-loader导入工作？他们加载我的lodash模板标记,我宁愿在我的.js文件中没有这些大量的HTML块,所以我可以省略x部分的导入模板.

PS：这不是一个反应项目,只是简单的webpack,babel,es6.

解决方法

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

的package.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);
    }
}