如何在Jest测试中使用我的webpack的html-loader导入？

我刚刚开始使用Jest测试框架，虽然直接进行单元测试工作正常，但我有大量问题测试其模块（通过babel + webpack的ES模块）需要HTML文件的任何组件。如何在Jest测试中使用我的webpack的html-loader导入？

下面是一个例子：

import './errorHandler.scss'; 
import template from './errorHandler.tmpl'; 

class ErrorHandler { 
    ...

我加载我开玩笑的package.json配置已经设置为返回一个空的对象，但该组件具体SCSS文件时，玩笑试图运行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": { 
    "setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js", 
    "moduleDirectories": ["node_modules"], 
    "moduleFileExtensions": ["js", "json", "html", "scss"], 
    "moduleNameMapper": { 
     "^.+\\.scss$": "<rootDir>/test/styleMock.js" 
    } 
}

似乎webpack html-loader与Jest无法正常工作，但我无法找到解决此问题的任何解决方案。

有谁知道我可以如何让这些html-loaderimport s在我的测试中工作？他们加载我的lodash模板标记，我宁愿没有这些有时在我的.js文件中大量的HTML块，所以我可以省略import template from x部分。

PS：这不是一个反应项目，只是简单的webpack，babel，es6。

来源

2016-09-14 Jannis

也许你自己的预处理器的文件将是解决方案：

ScriptPreprocessor

Custom-preprocessors

scriptpreprocessor：到提供从预处理源文件同步功能的模块的路径。例如，如果您希望能够在您的模块或节点尚未支持的测试中使用新的语言功能（例如，ES6类），则可以将编译ES6的许多转换器之一插入ES5在这里。

当我在我的webpack模块加载器中添加transform-decorators-legacy后，我的测试出现问题时，我创建了自己的预处理器。

来源

2016-09-19 11:52:30 robi

我最近遇到这个问题，创建自己的transform preprocesser就可以解决它。这是我的设置：

的package.json

"jest": { 
    "moduleFileExtensions": [ 
     "js", 
     "html" 
    ], 
    "transform": { 
     "^.+\\.js$": "babel-jest", 
     "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js" 
    } 
}

注：巴贝尔，开玩笑通常缺省包括在内，但如果指定自定义转换预处理器，你似乎有手动包括它。

测试/ utils的/ htmlLoader.js：

const htmlLoader = require('html-loader'); 

module.exports = { 
    process(src, filename, config, options) { 
     return htmlLoader(src); 
    } 
}

来源

2017-01-09 22:27:33 bnjmnhndrsn

这是非常有益的，谢谢你。我也想补充一点，你也可以用'underscore-template-loader'来做到这一点。 – Allen

如何在Jest测试中使用我的webpack的html-loader导入？

回答

相关问题