Utilisez le state manager Redux pour gérer l’état de vos applications

Redux a un énorme avantage pour les tests : il est prédictible ! En effet, les action creators comme les reducers retournent toujours le même résultat pour les mêmes paramètres.

On va donc tester les différentes parties de Redux via des tests unitaires.

Mettez en place les tests Redux

Pour effectuer les tests, nous allons utiliser Jest qui est déjà en place lorsque l’on utilise Create-React-App.

Dans le cas de Shiny, plusieurs tests existants ne fonctionnent plus :

Si l’on y regarde d’un peu plus près, on se rend compte que l’erreur est la même que celle que l’on a obtenue lorsque le Provider React-Redux était manquant.

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Nous verrons comment résoudre ce problème un peu plus loin dans le cours ; pour le moment on peut désactiver les tests qui posent problème en remplaçant  it()   par it.skip()  .

Testez les actions et les reducers avec Jest

Maintenant que l'environnement de test est prêt, nous allons mettre en place des tests pour les différentes fonctionnalités de l’application.

Il va donc falloir créer un fichier se terminant par .test.js  pour chaque fichier présent dans le dossier features  .

Par exemple, nous allons créer un fichier src/features/theme.test.js  pour les tests de la fonctionnalité theme  .

On va alors créer des tests (avec la fonction it()  de Jest) qui vont appeler des action creators, et vérifier que le résultat est bien celui attendu :

import * as themeActions from './theme'
 
describe('Theme actions', () => {
    it('should create a toggle action objet', () => {
        expect(themeActions.toggle()).toEqual({
        type: 'theme/toggle',
    })
 })
 
 it('should create a set action objet', () => {
    expect(themeActions.set('light')).toEqual({
        type: 'theme/set',
        payload: 'light',
    })
    expect(themeActions.set('dark')).toEqual({
        type: 'theme/set',
        payload: 'dark',
    })
 })
})

Une fois les action creators testés, on passe au reducer. On va créer des tests qui exécutent le reducer avec un state et une action définis, et vérifier le state obtenu :

import themeReducer from './theme'
 
describe('Theme reducer', () => {
    it('should return the initial state when state is undefined', () => {
        expect(themeReducer(undefined, { type: '@INIT' })).toEqual('light')
    })
 
    it('should toggle theme', () => {
        expect(themeReducer('light', themeActions.toggle())).toEqual('dark')
        expect(themeReducer('dark', themeActions.toggle())).toEqual('light')
    })
 
    it('should set theme', () => {
        expect(themeReducer('light', themeActions.set('light'))).toEqual('light')
        expect(themeReducer('dark', themeActions.set('light'))).toEqual('light')
    })
 
    it('should return state on invalid action', () => {
    expect(themeReducer('light', { type: 'INVALID' })).toEqual('light')
    })
})

A présent, voyons comment tester notre logique Redux :

Testons maintenant le reducer :

 Vous pouvez retrouver le code de cette vidéo sur la branche P4C4S2-tests-actions-reducers du repository à cette adresse.

Voyons maintenant comment corriger les tests des composants.

Testez un composant connecté avec React Testing Library

Pour tester les composants connectés à Redux, nous allons utiliser React Testing Library qui est installé par défaut avec Create-React-App.

Comme expliqué précédemment, les tests existants ne fonctionnent pas. En effet, les hooks de React-Redux (  useSelector  , useDispatch  et useStore  ) ne trouvent pas le store Redux car le Provider de React-Redux est manquant.

Il va donc falloir ajouter le Provider, mais pour ne pas avoir à l’ajouter  à chaque render  , on peut utiliser l’option Wrapper  de React Testing Library.

Nous allons donc modifier la fonction render  qui se trouve dans le fichier src/utils/test/index.jsx  :

import { render as rtlRender } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import themeReducer from '../../features/theme'
import freelancesReducer from '../../features/freelances'
import surveyReducer from '../../features/survey'
import freelanceReducer from '../../features/freelance'
import resultsReducer from '../../features/results'
import answersReducer from '../../features/answers'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
 
export function render(ui, options) {
    const store = configureStore({
        reducer: {
            theme: themeReducer,
            freelances: freelancesReducer,
            survey: surveyReducer,
            freelance: freelanceReducer,
            results: resultsReducer,
            answers: answersReducer,
        },
    })
 
    function Wrapper({ children }) {
        return (
            <MemoryRouter {...options}>
                <Provider store={store}>{children}</Provider>
            </MemoryRouter>
        )
    }
    rtlRender(ui, { wrapper: Wrapper })
}

On peut maintenant enlever les .skip  des tests, qui devraient maintenant fonctionner !

Vous pouvez retrouver le code de cette vidéo sur la branche P4C4S3-tests-components du repository à cette adresse.

Exercez-vous

C’est maintenant à vous de mettre en pratique ce que nous venons de voir ensemble.

Vous allez donc devoir mettre en place les tests sur Shiny pour les actions, les reducers et les composants.

Une fois que vous avez terminé, allez jeter un œil à la version corrigée sur la branche P4C4S4-solution du repository React-Redux-Shiny à cette adresse.

En résumé

• Avec Redux, les actions et les reducers sont faciles à tester car ils sont prédictibles.

• On utilise Jest pour tester le résultat des action creators et des reducers.

• Pour tester les composants React connectés à Redux, on utilise le Wrapper  de React-Testing-Library.

Ça y est, la fin de ce cours approche ! Dans le dernier chapitre, je vous propose d’aller un peu au-delà de Redux pour découvrir deux outils de state management qui ont été fortement inspirés par Redux.