react-native - Jest 测试失败 "Cannot find module ' images/myimage.png' from SignInOrRegister.js"with image size class @1x,@2x,@3x,@4x

Question

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

在文件 SignInOrRegister.js 中，我有一个像这样定义的图像:

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

在 images 中，我有多个尺寸的同一张图片，名称如下:

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

当我运行 jest 快照测试时，它失败了。这是测试:

import React from 'react';
import renderer from 'react-test-renderer';
import SignInOrRegister from '../SignInOrRegister';

test('renders correctly', () => {
  const tree = renderer.create(<SignInOrRegister />).toJSON();
  expect(tree).toMatchSnapshot();
});

这是我在运行时遇到的错误:

> jest tests --updateSnapshot

 FAIL  src/pages/__tests__/SignInOrRegister.test.js
  ● Console

    console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
      The above error occurred in the <SignInOrRegister> component:
          in SignInOrRegister (at SignInOrRegister.test.js:6)

      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit  to learn more about error boundaries.

  ● renders correctly

    Cannot find module './images/myimage.png' from 'SignInOrRegister.js'

      25 |             <View style={styles.logoViewStyle}>
      26 |               <Image
    > 27 |                 source={require('./images/myimage.png')}
         |                   ^
      28 |                 style={styles.logoStyle}
      29 |               />
      30 |             </View>

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
      at SignInOrRegister.render (src/pages/SignInOrRegister.js:27:19)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6625:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6588:10)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7413:16)

我似乎无法在任何地方找到任何其他类似的问题。

Answer 1

解决方案是像这样命名图像:

我的图片.png
myimage@2x.png
myimage@3x.png
myimage@4x.png

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

每当图像发生变化时，还建议重新启动 metro bundler，构建您的应用，然后再次运行您的快照测试。