导入图像会打破开玩笑测试

Question

在React组件中导入资产(例如,从"../../../assets/img/logo.png"导入徽标)会出现此类错误

({"Object.":function(module,exports,require,__ dirname,__ filename,global,jest){ PNG语法错误
:ScriptTransformer._transformAndBuildScript中的无效或意外的令牌(node_modules/jest-runtime/build/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

我有同样的问题，我解决如下：

1. npm install -D jest-transform-stub
2. 然后，在 package.json 中，我添加了以下转换：

    "jest": {
        ...
        "transform": {
            ...
            ".+\\.(css|scss|png|jpg|svg)$": "jest-transform-stub"

Answer 2

我会尽量简化

导入图像文件时，Jest尝试将图像的二进制代码解释为.js，因此会出错。

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

我们如何做到这一点？

• 首先，您告诉Jest每次遇到图像导入时都要运行模拟文件。您可以通过将以下密钥添加到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 3

对于任何研究这个问题的人。您必须安装npm install --save-dev identity-obj-proxy才能获得必要的依赖项。

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

Answer 4

将以下行添加到 jest.config.js 文件中帮助我测试通过，

"\\.(jpg|jpeg|png)$": "identity-obj-proxy",

例子：

 moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png)$": "identity-obj-proxy",
  },

Answer 5

我也有同样的问题！我不确定这是否与原始问题中的情况相同，但对我来说，jest 仍然以某种方式尝试将图像加载为 JS 并尝试解析它们，同时我将匹配图像扩展名的文件映射到moduleNameMapper. 我的文件还包含一些将字符映射@到根 src 目录的代码，因为我有 webpack，并且它在项目（和 TS）中配置为 webpack 别名。完整的moduleNameMapper条目jest.config.js对我来说是这样的：

    moduleNameMapper: {
        '^@$': '<rootDir>/src',
        '^@/(.*)':
            '<rootDir>/src/$1',
        '\\.(jpg|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__/styleMock.js',
        '.*\\.(css|less)$': 'identity-obj-proxy',
    }

对我来说，事实证明，当我在组件中导入图像时，路径类似于：“@/assets/someImage.jpg”。然而，这似乎会首先匹配第一个正则表达式，即覆盖@别名的正则表达式：^@/(.*)。因此，它被映射到<rootDir>/src/$1而不是<rootDir>/__mocks__/fileMock.js.

我通过使别名仅匹配非图像来修复它：

    moduleNameMapper: {
        '^@$': '<rootDir>/src',
        '^@/(.*)\\.(?!jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/src/$1',
        '.*\\.(jpg|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__/styleMock.js',
        '.*\\.(css|less)$': 'identity-obj-proxy',
    }

Answer 6

如果你想在 webpack 中使用 jest，你需要显式地配置它。在这里查看本指南： https: //jestjs.io/docs/webpack