React Native 测试组件依赖于另一个组件

Question

我正在使用 Jest 和 react-test-renderer 来测试我的组件。当我测试仅从 react-native 模块导入的纯组件时，一切正常。例如，当我测试以下组件时：

import React from 'react';
import {Text, View} from 'react-native';

export default class Splash extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View testID={'splash-test-1'}>
                <Text>This is Splash Screen</Text>
            </View>
        );
    }
}

使用以下代码，测试将通过并且没有问题：

it('Splash Screen', () => {
    const screen= renderer.create(<Splash/>).root;
    expect(screen.findByProps({testID: 'splash-test-1'}).children.length).toBe(1);
})

但是当我在我的代码之上添加 任何模块 ，如 RBFetchblob（例如 import RNFetchBlob from "rn-fetch-blob";）时，我得到一个错误。例如在导入 RNFetchblob 时，出现以下错误：

● Test suite failed to run

    D:\Projects\MyProject\node_modules\rn-fetch-blob\index.js:5
    import {
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
......

我的问题是如何在具有许多依赖项的真实项目中测试 React 原生组件？

Answer 1

需要使用模拟https://jestjs.io/docs/manual-mocks#mocking-node-modules

对于您的示例，在根项目中需要创建 __mocks__ 文件夹并放置文件 rn-fetch-blob，代码为：

jest.mock('rn-fetch-blob', () => {
  return () => ({
    fs: jest.fn(),
    config: jest.fn(),
    DocumentDir: jest.fn(),
  });
});

React Native 测试组件依赖于另一个组件

React Native testing components with depends on another components

testing

jestjs

react-native

react-test-renderer