玩笑测试失败“无法从 SignInOrRegister.js 中找到模块‘images/myimage.png’”，图像大小类别为 @1x、@2x、@3x、@4x

Question

添加图像的多个尺寸类别后，我在 Jest 中的快照测试失败了。

\n\n

在文件SignInOrRegister.js中，我定义了一个图像，如下所示：

\n\n

<Image source={require('./images/myimage.png')} />

\n\n

在图像中，我有多个尺寸的同一图像，如下命名：

\n myimage@1x.png
\n myimage@2x.png
\n myimage@3x.png
\n myimage@4x.png

\n\n

当我运行笑话快照测试时，它失败了。这是测试：

\n\n

import React from 'react';\nimport renderer from 'react-test-renderer';\nimport SignInOrRegister from '../SignInOrRegister';\n\ntest('renders correctly', () => {\n  const tree = renderer.create(<SignInOrRegister />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n

\n\n

这是我运行时遇到的错误：

\n\n

> jest tests --updateSnapshot\n\n FAIL  src/pages/__tests__/SignInOrRegister.test.js\n  \xe2\x97\x8f Console\n\n    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060\n      The above error occurred in the <SignInOrRegister> component:\n          in SignInOrRegister (at SignInOrRegister.test.js:6)\n\n      Consider adding an error boundary to your tree to customize error handling behavior.\n      Visit  to learn more about error boundaries.\n\n  \xe2\x97\x8f renders correctly\n\n    Cannot find module './images/myimage.png' from 'SignInOrRegister.js'\n\n      25 |             <View style={styles.logoViewStyle}>\n      26 |               <Image\n    > 27 |                 source={require('./images/myimage.png')}\n         |                   ^\n      28 |                 style={styles.logoStyle}\n      29 |               />\n      30 |             </View>\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)\n      at SignInOrRegister.render (src/pages/SignInOrRegister.js:27:19)\n      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6625:31)\n      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6588:10)\n      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7413:16)\n

\n\n

\n我似乎在任何地方都找不到任何其他类似的问题。

\n

Answer 1

解决方案是将图像命名为：

myimage.png
myimage@2x.png
myimage@3x.png
myimage@4x.png

所以第一张图片不应该有@1x

每当图像发生更改时，也建议重新启动 Metro 捆绑程序，构建您的应用程序，然后再次运行快照测试。