我刚刚开始使用Jest测试框架,虽然直接单元测试工作正常,但我在测试其模块中的任何组件(通过babel + webpack的ES模块)需要HTML文件时遇到大量问题.
这是一个例子:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
Run Code Online (Sandbox Code Playgroud)
我正在加载我在Jest的package.json配置中设置的组件特定SCSS文件以返回一个空对象但是当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)
Run Code Online (Sandbox Code Playgroud)
我的Jest配置package.json如下:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
Run Code Online (Sandbox Code Playgroud)
似乎webpack html-loader与Jest无法正常工作,但我找不到任何有关如何解决此问题的解决方案.
有谁知道如何html-loader import在我的测试中使这些工作?他们加载我的lodash模板标记,我宁愿不在我的.js文件中有这些大量的HTML块,所以我可以省略该import template from x部分.
PS:这不是一个反应项目,只是简单的webpack,babel,es6.