Webpack在jest单元测试中需要非js内容

Question

最近我把我的一个项目转换成webpack & &;巴别塔。它是由组件组成的。

我在运行单元测试时遇到了一个问题。如果我在tests文件夹中有一个文件，如

import component from '../custom-options';
test('adds 1 + 2 to equal 3', () => {
  expect(3).toBe(3);
});

问题是该组件是一个模块，它的要求类型为

var htmlString = require('./custom-options.html');

当我尝试运行网站本身，它运行得很好，因为原始加载器是为此要求配置的。但是，当我运行jest时，测试输出:

 custom-options.html:1
 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){?<div id="custom-options-containe" class="mod--custom-options">
                                                                                          ^
SyntaxError: Unexpected token <
  at transformAndBuildScript (node_modulesjest-clinode_modulesjest-runtimebuildtransform.js:284:10)
  at custom-options.js:13:38
  at Object.<anonymous> (custom-options.js:93:3)

知道为什么会这样吗?我认为玩笑是错误的，但我试着用艾娃代替它，结果是一样的。我开始觉得这是个通天塔问题。

我正在使用babel-jest预处理器运行jest。

Answer 1

您可以在package.json的jest设置中为所有非JS文件创建一个全局模拟，如下所示:

"jest": {
  "moduleNameMapper": {
    "^.+\.html$": "<rootDir>/__mocks__/htmlMock.js"
  }
}

然后在项目根目录下的__mocks__文件夹中创建文件htmlMock.js，内容如下:

module.exports = 'test-file-stub';

更多信息请看这里

如果您想对每个测试用例都有一个特殊的模拟，您也可以在测试中模拟文件，像这样:

jest.mock('path/from/test/to/custom-options.html', ()=> 'test-file-stub');

注意，路径是相对于测试文件的，而不是相对于您想要测试的文件的。

Answer 2

您也可以使用jest-raw-loader来模拟webpack的raw-loader的动作。您需要将其设置为transform，并确保也包含默认的babel-jest转换条目。

"jest": {
  "transform": {
    "\.js$": "babel-jest",
    "\.(html|xml|txt)$": "jest-raw-loader"
  }
}