我刚刚开始使用Jest测试框架,直接的单元测试工作正常,但是当我需要测试任何一个模块(通过babel+webpack的ES模块)需要一个HTML文件的组件时,我遇到了巨大的问题。
这里有一个例子:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
我正在加载组件特定的 SCSS 文件,这个文件已经在 Jest 的 package.json
配置中设为返回一个空对象,但是当 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)
我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 模板标记,有时我希望不将这些大量的 HTML 块放入我的 .js
文件中,以便我可以省略 import template from x
部分。
附注:这不是一个 React 项目,只是普通的 webpack、babel 和 es6。
underscore-template-loader
来实现这个功能。 - Allenprocess
函数必须返回一个字符串,或者是一个包含该字符串的code
键的对象。”这可能只适用于旧版本的jest或html-loader吗? - Sam Hasler