Question

我是React Native的新手，正在学习如何为欢迎屏幕编写测试。屏幕上只有一个背景图片，一些文本和一个按钮。

这是我遇到的错误

onsole.error node_modules/prop-types/checkPropTypes.js:20

  Warning: Failed prop type: Invalid prop `source` supplied to `Image`.

      in Image (at WelcomeScreen.js:91)

      in WelcomeScreen (at WelcomeTest.js:7)

console.error node_modules/react/cjs/react.development.js:188

  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



  Check your code at WelcomeScreen.js:104.

      in WelcomeScreen (at WelcomeTest.js:7)

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9036

  The above error occurred in one of your React components:

      in View (created by View)

      in View (at ImageBackground.js:63)

      in ImageBackground (at WelcomeScreen.js:74)

      in WelcomeScreen (at WelcomeTest.js:7)



  Consider adding an error boundary to your tree to customize error handling behavior.

这是我为WelcomeTest.js编写的内容

    import 'react-native'
import React from 'react'
import WelcomeScreen from '../App/Containers/WelcomeScreen'
import renderer from 'react-test-renderer'

test('WelcomeScreen component', () => {
  const tree = renderer.create(<WelcomeScreen />).toJSON()
  expect(tree).toMatchSnapshot()
})

不确定我在做什么错。我已经检查了导入，并确保页面在其上正确显示。有人可以指出正确的方向吗？预先感谢

Answer 1

在您的jest.config.js中添加：

moduleNameMapper: {
    '^image![a-zA-Z0-9$_-]+$': 'GlobalImageStub',
}

这应该正确模拟解析图像路径以用于测试。

Answer 2

我认为Jest在创建快照以与旧快照进行比较时无法使用Image。

用Jest响应本机测试

2 个答案: