Stratégies et outils / Blogs / Perficient

Introduction

Redux, le conteneur d’état prévisible d’une application JavaScript, est devenu un composant clé pour la gestion de l’état des applications React. Pour vous assurer que votre gestion d’état fonctionne comme prévu, il est essentiel de tester votre code Redux. Nous examinerons les méthodes et les ressources pour tester les applications Redux dans cet article détaillé.

Pourquoi tester Redux ?

Les tests font partie intégrante du processus de développement et Redux ne fait pas exception. Voici quelques raisons pour lesquelles tester Redux est essentiel :

1. État prévisible: garantit que vos transitions d’état sont prévisibles et suivent la logique que vous avez définie.
2. Sécurité de la refactorisation: Vous permet de refactoriser votre code en toute confiance, sachant que vos tests détecteront les régressions.
3. Collaboration: Facilite la collaboration en fournissant un filet de sécurité pour les modifications apportées par différents développeurs.
4. Documentation: Agit comme une documentation vivante, montrant comment les différentes parties de votre application interagissent avec l’état.

Stratégies pour tester Redux

1. Test des créateurs d’action

Les créateurs d’actions sont des fonctions qui renvoient des actions. Les tester implique de vérifier si l’action correcte est renvoyée.

// Example Jest Test for Action Creators

test('action to add a todo', () => {

  const text="Finish documentation";

  const expectedAction = {

    type: 'ADD_TODO',

    payload: text,

  };

  expect(addTodo(text)).toEqual(expectedAction);

});

2. Test des réducteurs

Les réducteurs sont des fonctions qui spécifient comment l’état de l’application change en réponse à une action. Testez que le réducteur produit l’état correct après avoir reçu une action.

// Example Jest Test for Reducers

test('should handle ADD_TODO', () => {

  const prevState = [{ text: 'Use Redux', completed: false }];

  const action = {

    type: 'ADD_TODO',

    payload: 'Run the tests',

  };

  const newState = todos(prevState, action);

  expect(newState).toEqual([

    { text: 'Use Redux', completed: false },

    { text: 'Run the tests', completed: false },

  ]);

});

3. Test des sélecteurs

Les sélecteurs sont des fonctions qui prennent l’état Redux et renvoient des données pour le composant. Testez que vos sélecteurs renvoient les tranches correctes de l’état.

// Example Jest Test for Selectors
test('select only completed todos', () => {

  const state = {

    todos: [

      { text: 'Use Redux', completed: false },

      { text: 'Run the tests', completed: true },

    ],

  };

  const expectedSelectedTodos = [{ text: 'Run the tests', completed: true }];

  expect(selectCompletedTodos(state)).toEqual(expectedSelectedTodos);

});

Outils pour tester Redux

1. Est

Est est un framework de test JavaScript populaire qui fonctionne de manière transparente avec Redux. Il fournit un moyen simple et intuitif d’écrire des tests unitaires pour vos actions, réducteurs et sélecteurs.

2. Enzyme

Enzyme est un utilitaire de test pour React qui facilite l’affirmation, la manipulation et le parcours de la sortie des composants React. Il est souvent utilisé conjointement avec Jest pour tester les composants React qui interagissent avec Redux.

3. Extension Redux DevTools

Le Extension Redux DevTools est une extension de navigateur disponible pour Chrome et Firefox. Il vous permet d’inspecter, de surveiller et de déboguer vos changements d’état Redux. Bien qu’il ne s’agisse pas d’un outil de test en soi, il aide à comprendre et à déboguer les changements d’état de votre application.

4. encoche

encoche est une bibliothèque pour se moquer des requêtes HTTP. Cela peut être pratique lors du test d’actions asynchrones impliquant des appels d’API.

Conclusion

La validation de divers aspects de la procédure de gestion de l’état fait partie du test des applications Redux. Vous pouvez vous assurer que votre code Redux est stable, fiable et maintenable en utilisant des outils tels que Jest et Enzyme en conjonction avec une méthodologie de développement piloté par les tests (TDD). Amusez-vous avec vos tests!