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

Question

最近我将我的一个项目转换为webpack和babel.它由淘汰组件制成.

我在运行单元测试时遇到了问题.如果我在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_modules\jest-cli\node_modules\jest-runtime\build\transform.js:284:10)
  at custom-options.js:13:38
  at Object.<anonymous> (custom-options.js:93:3)

知道为什么会这样吗？我认为开玩笑是错误的,但我已经尝试用Ava将其解决,结果是一样的.我开始认为这是个问题.

我正在用babel-jest预处理器开玩笑.

Answer 1

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

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

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

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

有关详细信息,请查看此处

如果你想为每个测试用例做一个特殊的模拟,你也可以在你的测试中模拟这样的文件:

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

请注意,路径相对于测试文件而不是您要测试的文件.