导入图像打破了玩笑测试

在 React 组件中导入资产 (例如，从”. ./. ./. ./asset/img/logo.png 导入徽标) 给出了这样的错误

({“ Object.”: function (模块，导出，要求，_ _ dirname，_ _ filename，global，jest){ PNG
SyntaxError: 无效或意外的令牌 在 ScriptTransformer. _ formAndBuildScript (node _ module/jest-running/build/script _ former.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
}

我错过了什么？

53863 次浏览
小开

如果您想在 webpack 中使用 jest，则需要按照这样显式地配置它。看看这个指南: https://jestjs.io/docs/webpack

小开

在导入图像文件时，Jest 尝试将图像的二进制代码解释为。因此会遇到错误。

唯一的解决办法是在玩笑看到图像导入时模仿默认响应！

我们要怎么做？

  • 首先，告诉 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"子元素

  • 最后，在根目录中创建一个 mocks文件夹，并在其中创建 fileMock.js文件。用下面的代码片段填充文件
module.exports = '';

注意 : 如果使用 es6，可以使用 export default '';避免使用 Eslint 标志

完成上述步骤后，可以重新启动测试和 你可以走了

注意 . 请记住在 moduleNameMapper中添加图像文件的可变扩展名，以便可以对它们进行模拟。

我希望我能帮上忙！

小开

在 IOS 映像名称为 @的情况下

moduleNameMapper: {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[@./a-zA-Z0-9$_-]+\\.(png|gif)$": "RelativeImageStub"
}
小开

对于任何调查这个问题的人来说，您必须安装 npm install --save-dev identity-obj-proxy来获得必要的依赖关系。

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

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

    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',
}

对我来说，当我在组件中导入图像时，路径类似于: ‘@/asset/some Image.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',
}
小开

我遇到了同样的问题，我解决了它如下:

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

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

对于那些在 Nuxt 2中使用 Vue test util并且面临问题或这个问题 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){ SyntaxError: Invalid or unexpected token的人

在 test/unit目录中创建一个名为 fileTransformer.js的文件，然后添加以下代码:

const path = require('path')


module.exports = {
process(src, filename, config, options) {
return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
},
}

然后将这些代码添加到 jest.config.js文件:

  transform: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/test/unit/fileTransformer.js',
// ... other configs
},
小开

在 jest.config.js 文件中添加以下代码行帮助我通过了测试,

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

例如:

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

在本机反应中，我们使用 preset: 'react-native'

Https://github.com/facebook/react-native/blob/main/jest-preset.js

或者将 transform加入到 jest.config.js

  transform: {
'^.+\\.(js|ts|tsx)$': 'babel-jest',
'^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
'../node_modules/react-native/jest/assetFileTransformer.js',
),
},

如果您不使用 React Native，则需要在项目中创建一个文件 https://github.com/facebook/react-native/blob/main/jest/assetFileTransformer.js，并将路径更改为 require.resolve

小开

什么都不管用，所以我换了新的 到处都是“浅”的“安装”，现在运行良好。

小开 
 npm install --save-dev identity-obj-proxy

并在 jest.config.js 中添加以下内容:

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

这招对我很管用。


提交答案