时间戳

首页 > 解决方案 > 玩笑测试失败“无法从 SignInOrRegister.js 中找到模块 'images/myimage.png'”，图像大小类为 @1x、@2x、@3x、@4x

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

问题描述

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

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

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

在图像中，我有多个尺寸的相同图像，如下所示：

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

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

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)


我似乎在任何地方都找不到像这样的任何其他问题。

标签： react-nativejestjs

解决方案

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

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

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

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

推荐阅读