使用 Jest + React Native 测试组件中导入的图像

Question

这是我的 package.json 配置：

"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },        
    "moduleNameMapper": {
      "\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    }
  },

我在组件内部需要这个图像：

const errorImage = require('../../../assets/images/load_error.png');

这是试图呈现这个：

return (
            <Image
                source={ this.state.source }
                onError={ this._handleError } 
                resizeMode={resizeMode}
                style={[this.props.style, {height: this.state.height, width: this.state.width}]}
            />
        );

处理state.source错误后，将返回所需的错误图像。它在浏览器上完美运行，没有警告或错误。但我在用笑话进行测试时遇到了一些麻烦。

但由于某种原因，它找不到 load_error.png 图像。这是我的文件夹结构：

        ___mocks___
        --> fileMocks.js
        --> load_error.png
        __test__
        --> componentes
        --> --> imageComponent.test.js
        components
        --> imageComponent.js

无论我做什么，错误图像都会变空。

这是我的测试：

const props = {
    author: 'Random Author',
    isSent: true,
    data:{origin:1},
    attachments:{
        4 : {
            type: 2, //file, pdf, word, etc...
            preview: 'pdf',
            url: 'file.png',
        },
    },
}

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

当它没有找到时，file.png它应该查找错误图像，这是图像组件内的 require('error.png') 。

这是我的文件夹结构：

该测试在 Attachements.test.js 中运行，测试 attachment.js 文件，该文件使用图像底部 ui 文件夹中的图像组件。

来自笑话的错误消息：

测试完成后无法登录。您是否忘记在测试中等待某些异步内容？尝试记录“警告：失败的道具类型：source提供给Image图像中的 . 的道具无效（位于 ....

Answer 1

您可以尝试使用手动模拟测试文件中的图像

jest.mock('../../../assets/images/load_error.png')