我正在开发一个React本机应用程序,它也使用Redux,我想用Jest编写测试.我无法模仿react navigation添加的"导航"props .

以下是我的组件:

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Text, View } from 'react-native';

const Loading = (props) => {
  if (props.rehydrated === true) {
    const { navigate } = props.navigation;
    navigate('Main');
  }
  return (
    <View>
      <Text>Loading...</Text>
    </View>
  );
};

Loading.propTypes = {
  rehydrated: PropTypes.bool.isRequired,
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

const mapStateToProps = state => ({
  rehydrated: state.rehydrated,
});

export default connect(mapStateToProps)(Loading);

加载组件作为屏幕添加到抽屉显示器.

以下是测试:

import React from 'react';
import renderer from 'react-test-renderer';
import mockStore from 'redux-mock-store';

import Loading from '../';

describe('Loading screen', () => {

  it('should display loading text if not rehydrated', () => {
    const store = mockStore({
      rehydrated: false,
      navigation: { navigate: jest.fn() },
    });

    expect(renderer.create(<Loading store={store} />)).toMatchSnapshot();

  });
});

运行测试时,出现以下错误:

Warning: Failed prop type: The prop `navigation` is marked as required in `Loading`, but its value is `undefined`.
          in Loading (created by Connect(Loading))
          in Connect(Loading)

你知道如何模拟导航属性吗?

推荐答案

try 通过props 直接通过navigation分:

it('should display loading text if not rehydrated', () => {
  const store = mockStore({
    rehydrated: false,
  });
  const navigation = { navigate: jest.fn() };

  expect(renderer.create(<Loading store={store} navigation={navigation} />)).toMatchSnapshot();
});

React-native相关问答推荐

react 本机函数不通过usContext触发

Reaction-Native-pdf文件不是PDF格式或已损坏

expo 日历应用因权限问题而崩溃

axios 在react native 中给出 [AxiosError: Network Error]

根据搜索字符串中的每个字母过滤数组

React Native Axios 通过数组的键过滤

按下按钮有一个borderRadius

在整个屏幕上获取touch 事件

如何从 React Native-App 中的 res/drawable-folder 加载图像?

React Native:组件卸载时的动画

有react-native复选框的例子吗?

是否可以在 react-native 的构造函数中调用异步函数?

无法识别的 WebSocket 连接选项 `agent`、`perMessageDeflate`、`pfx`、`key`、`passphrase`... 你的意思是把这些放在 `headers` 下吗?

如何将 BuildConfig 值传递给依赖模块?

如何用 Realm 元素文件组织 React Native?

如何在react-native中显示toast消息

Expo LAN 配置不适用于新的 ReactNative 元素

在 ReactNative 中单击按钮时如何获取 TextInput 中的值

react-native:如何覆盖组件中定义的默认样式

为什么 this.state 在react-native中未定义?