使用带有 Jest 的 react-navigation 的测试组件

问题描述

我正在开发一个也使用 Redux 的 React Native 应用程序，我想用 Jest 编写测试.我无法模拟 react-navigation 添加的导航"道具.

I'm working on a React Native application that also use Redux and I want to write tests with Jest. I'm not able to mock the "navigation" prop that is added by react-navigation.

这是我的组件:

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);

加载组件作为屏幕添加到 DrawerNavigator.

The Loading component is added as a screen to a DrawerNavigator.

这里是测试:

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();

  });
});

当我运行测试时，出现以下错误:

When I run the test, I get the following error:

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)

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

Any idea on how to mock the navigation property?

推荐答案

尝试通过 props 直接传递navigation:

Try to pass navigation directly via props:

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();
});

这篇关于使用带有 Jest 的 react-navigation 的测试组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！