web-dev-qa-db-fra.com

Composant de test qui utilise React-Navigation avec Jest

Je travaille sur une React application native qui utilise également Redux et je veux écrire des tests avec Jest. Je ne suis pas en mesure de se moquer de l'accessoire "navigation" qui est ajouté par react-navigation .

Voici ma composante:

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

Le composant de chargement est ajouté en tant qu'écran à un DrawerNavigator.

Et voici le test:

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

  });
});

Lorsque j'exécute le test, j'obtiens l'erreur suivante:

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)

Une idée sur la façon de se moquer de la propriété de navigation?

react-nativemockingjestjsreact-navigation
15
alex.ac

Essayez de passer navigation directement via les accessoires:

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