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';行时，它会断言：< / p>

/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 import工作？他们加载了我的lodash模板标记，并且我的.js文件中有时没有大量的HTML块，所以我可以省略import template from x部分。

PS：这不是一个反应项目，只是普通的webpack，babel，es6。

Answer 1

我最近遇到了这个特定的问题，创建自己的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);
    }
}

Answer 2

聚会晚了一点，但想补充一点，如果您想走那条路线，那里也有html-loader-jest npm软件包可以这样做。

npm安装完成后，您将使用以下命令将其添加到您的jest配置中：

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

Answer 3

也许您自己的预处理器文件将成为解决方案：

ScriptPreprocessor

Custom-preprocessors

scriptpreprocessor：从预处理源文件提供同步功能的模块的路径。例如，如果您希望能够在模块中使用新的语言功能或节点尚未支持的测试（例如，ES6类），您可能会插入编译的许多转换器之一这里是ES6到ES5。

我在将transform-decorators-legacy添加到我的webpack模块加载器后，在测试出现问题时创建了自己的预处理器。

Answer 4

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

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

htmlTemplateMock.html 是空文件

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

4 个答案: