如何在Jest测试中使用webpack的html-loader导入? [英] How can I use my webpack's html-loader imports in Jest tests?
问题描述
我刚开始使用Jest测试框架,虽然直接的单元测试可以正常工作,但在测试其模块中的任何组件(通过babel + webpack的ES模块)中需要HTML文件的组件时,我遇到了很多问题.
I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
这里是一个例子:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
我正在加载在Jest的package.json
配置中设置的特定于组件的SCSS文件,以返回一个空对象,但是当Jest尝试运行import template from './errorHandler.tmpl';
行时,它会中断说:
I am loading the component specific SCSS file which I have set in Jest's package.json
config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl';
line it breaks saying:
/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配置如下:
My Jest config from package.json
is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
webpack html-loader
似乎无法与Jest一起正常使用,但是我找不到任何解决方法.
It seems that the webpack html-loader
is not working correctly with Jest but I can't find any solution on how to fix this.
有人知道我可以如何在测试中使用这些html-loader
import
作品吗?他们加载了我的lodash模板标记,我宁愿在我的.js
文件中有时不包含大量HTML块,因此我可以省略import template from x
部分.
Does anyone know how I can make these html-loader
import
s work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js
file so i can omit the import template from x
part.
PS:这不是一个React项目,只是普通的webpack,babel,es6.
PS: This is not a react project, just plain webpack, babel, es6.
推荐答案
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
注意:通常默认情况下会包含babel-jest,但是如果您指定自定义转换预处理器,则您似乎必须手动将其包括在内.
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
这篇关于如何在Jest测试中使用webpack的html-loader导入?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!