Comment mettre à L'Essai Les composants connectés React-Redux?

Vous pouvez tester votre composant connecté et je pense que vous devriez le faire. Vous pouvez vouloir tester le composant non connecté d'abord, mais je suggère que vous n'aurez pas la couverture de test complète sans également tester le composant connecté.

ci-dessous est un extrait non testé de ce que je fais avec Redux et Enzyme. L'idée centrale est d'utiliser Provider pour connecter l'état en test au composant connecté en test.

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import SongForm from '../SongForm'; // import the CONNECTED component

// Use the same middlewares you use with Redux's applyMiddleware
const mockStore = configureMockStore([ /* middlewares */ ]);
// Setup the entire state, not just the part Redux passes to the connected component.
const mockStoreInitialized = mockStore({ 
    songs: { 
        songsList: {
            songs: {
                songTags: { /* ... */ } 
            }
        }
    }
}); 

const nullFcn1 = () => null;
const nullFcn2 = () => null;
const nullFcn3 = () => null;

const wrapper = mount( // enzyme
        <Provider store={store}>
          <SongForm
            screen="add"
            disabled={false}
            handleFormSubmit={nullFcn1}
            handleModifySong={nullFcn2}
            handleDeleteSong={nullFcn3}
          />
        </Provider>
      );

const formPropsFromReduxForm = wrapper.find(SongForm).props(); // enzyme
expect(
        formPropsFromReduxForm
      ).to.be.deep.equal({
        screen: 'add',
        songTags: initialSongTags,
        disabled: false,
        handleFormSubmit: nullFcn1,
        handleModifySong: nullFcn2,
        handleDeleteSong: nullFcn3,
      });

===== ../SongForm.js

import React from 'react';
import { connect } from 'react-redux';

const SongForm = (/* object */ props) /* ReactNode */ => {
    /* ... */
    return (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            ....
        </form>

};

const mapStateToProps = (/* object */ state) /* object */ => ({
    songTags: state.songs.songTags
});
const mapDispatchToProps = () /* object..function */ => ({ /* ... */ });

export default connect(mapStateToProps, mapDispatchToProps)(SongForm)

Vous pouvez vouloir créer un magasin avec pure Redux. redux-mock-store est juste une version légère de celui-ci destiné à l'essai.

Vous pouvez utiliser react-addons-test-utils au lieu de l'Enzyme d'airbnb.

j'utilise le chai-enzyme d'airbnb pour avoir des options D'attente réactives. Il n'était pas nécessaire dans cet exemple.

le problème avec la réponse acceptée est que nous exportons quelque chose inutilement juste pour pouvoir le tester. Et exporter une classe juste pour la tester n'est pas une bonne idée à mon avis.

Voici une solution plus nette sans devoir exporter autre chose que le composant connecté:

si vous utilisez jest, vous pouvez vous moquer connect méthode de retour trois choses:

1. mapStateToProps
2. mapDispatchToProps
3. ReactComponent

le Faire est assez simple. Il y a 2 façons: les moqueries en ligne ou les moqueries globales.

1. En ligne fantaisie

ajouter l'extrait suivant avant la fonction describe du test.

jest.mock('react-redux', () => {
  return {
    connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
      mapStateToProps,
      mapDispatchToProps,
      ReactComponent
    }),
    Provider: ({ children }) => children
  }
})

2. En utilisant le fichier maquette

1. Créer un fichier __mocks__/react-redux.js à la racine (où l'emballage.json est situé)
2. ajouter l'extrait suivant dans le fichier.

module.exports = {
  connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
    mapStateToProps,
    mapDispatchToProps,
    ReactComponent,
  }),
  Provider: ({children}) => children
};

après vous être moqué, vous pourrez accéder à tous les trois ci-dessus en utilisant Container.mapStateToProps,Container.mapDispatchToProps et Container.ReactComponent.

le conteneur peut être importé en faisant simplement

import Container from '<path>/<fileName>.container.js'

j'Espère que ça aide.

notez que si vous utilisez file mock. Le fichier moqué sera utilisé globalement pour tous les cas de test(sauf si vous faites jest.unmock('react-redux')) avant l'essai.

essayez de créer 2 fichiers, un avec le composant lui-même, n'étant pas au courant d'aucun magasin ou quoi que ce soit (Phonevérification-component.js). Puis le deuxième (Phonevérification.js), que vous utiliserez dans votre application et qui ne renvoie que le premier composant souscrit à stocker via connect fonction, quelque chose comme

import PhoneVerificationComponent from './PhoneVerification-component.js'
import {connect} from 'react-redux'
...
export default connect(mapStateToProps, mapDispatchToProps)(PhoneVerificationComponent)

alors vous pouvez tester votre composant "muet" en demandant PhoneVerification-component.js dans votre test et de lui fournir les accessoires nécessaires moqués. Il ne sert à rien de tester déjà testé (connect decorator, mapStateToProps, mapDispatchToProps etc...)