图像导入打破开玩笑测试

Question

在阵营进口的资产（例如，进口标志从” ../../../assets/img/logo.png）组件给出了这样的错误

（{ “对象”：功能（模块，产品出口，要求，__目录名，文件名__，全球，笑话）{PNG 语法错误：在ScriptTransformer._transformAndBuildScript无效或意外的标记（node_modules /开玩笑的运行时/构建/ script_transformer.js：305：17）

这是我的配置是

"jest": {
"testRegex": ".*\\.spec\\.js$",
"moduleFileExtensions": [
  "js",
  "jsx",
  "json"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "assets"
],
"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"verbose": true,
"bail": true
}

我失去了什么？

Answer 1

I will make this as simple as possible

当你导入图像文件，玩笑试图解释的图像作为.js文件的二进制代码，因此运行到错误。

the only way out is to mock a default response anytime jest sees an image import

How do we do this?

• 首先你告诉玩笑来遇到图像导入每次运行模拟文件。您可以通过添加关键做到这一点下面您的package.json文件

"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
}

如果你已经有了"Jest"键，只需添加"moduleNameMapper"孩子在里面

• 最后，建立在你的根嘲弄文件夹并创建里面fileMock.js文件。填入下面的代码片段文件

module.exports = ''; 

Note > if you are using es6 u can use export default ''; to avoid an Eslint flag

当你与上述步骤完成后，你可以重新启动测试，你是好去。

注意。记得添加您的图像文件的扩展名不同的moduleNameMapper，使他们可以嘲笑。

我希望我已经能够提供帮助。 ＃干杯！

Answer 2

如果你想用玩笑带的WebPack，你需要明确其配置为如此。看看这里本指南：​​http://facebook.github.io/jest/docs/en/webpack.html