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

莫森阿姨

我正在使用Jestreact-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 Native 组件?

瓦西尔·纳胡利亚克

需要使用模拟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(),
  });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React Native,从一个组件导航到另一个组件

React Native将Text组件添加到另一个Text组件中

React Native:组件位于另一个组件之上

从另一个组件到达在组件内声明的对象 - React Native

React Native将一个组件插入另一个

React Native - 将数据从一个组件传递到另一个

如何在React Native中从另一个功能组件更改一个功能组件的状态?

无法使用 React Native 将值从一个组件传递到另一个组件

如何在另一个组件渲染后渲染一个React Native组件?

在React-native中将一个组件的状态更改为另一个组件的状态

react native - 如何将参数从一个组件传递到另一个组件?

如何从 react-native 中的另一个功能组件访问一个功能组件的状态?

如何使用 Kotlin/native 生成依赖于另一个的 .framework?

如何测试React Native组件不止一个级别?

React Native使用另一个函数循环返回多个JSX组件

我的按钮无法更改另一个React Native组件中的状态

在 React Native 中导航时,如何从另一个组件调用函数?

来自另一个组件的 (react-native) 函数不会返回我的值

如何从React-Native中的另一个组件打开/关闭Drawer

如何在React Native的另一个组件中使用ref?

如何在另一个文件中获取组件的状态 react native

无法调用或更新另一个组件 React Native 的状态

如何在React Native中导航到类组件中的另一个屏幕

从另一个组件更改React Native App.js中的状态

React Native-将状态传递给另一个组件

如何从另一个文件获取React Native导航负载组件?

我如何在React Native中从另一个组件调用函数?

如何在 React Native 的另一个组件中使用 API 获取状态

从React Native中的另一个组件导航后,如何刷新堆栈中已经存在的组件