Comment tester les applications Next.js à l'aide de Jest

L'objectif principal de tout processus de développement est de créer des applications prêtes pour la production. Pour y parvenir, il est essentiel d'écrire du code qui non seulement réponde aux exigences fonctionnelles mais reste également stable et fiable dans le temps. Les tests servent de protection, garantissant que les applications fonctionnent comme prévu, même lorsque de nouvelles mises à jour sont effectuées au cours du développement.

Bien que l'écriture de tests complets qui englobent divers cas extrêmes puisse prendre un temps considérable, cela aide à signaler et à résoudre les problèmes avant qu'ils n'atteignent les environnements de production.

Tester les applications Next.js

L'écriture de tests est un aspect essentiel et souvent sous-estimé du développement d'applications robustes. Il est facile de tomber dans la tentation d'expédier le code directement à la production, en s'appuyant sur la conviction que "vous avez créé le code, il doit donc fonctionner !"

Cependant, cette approche peut entraîner des problèmes et des bogues imprévus dans les environnements de production. Par conséquent, l'adoption d'une approche de développement piloté par les tests (TDD) peut vous aider à maximiser votre confiance dans votre code et à minimiser le temps passé débogage et résolution de bugs mineurs qui aurait pu glisser à la production.

Qu'est-ce que la plaisanterie?

Plaisanter est un cadre de test populaire qui est largement utilisé par différents Cadres JavaScript. Il fournit une suite de fonctionnalités de test telles qu'un puissant testeur, des simulations automatiques et des tests instantanés.

Idéalement, ces fonctionnalités sont utiles pour obtenir une couverture de test complète et garantir la fiabilité de votre application à travers différents types d'épreuves.

Créer une application de tâches Next.js

Passons maintenant au processus d'exécution des tests unitaires sur une application Next.js à l'aide de Jest. Cependant, avant de commencer, créez un projet Next.js et installez les dépendances requises.

Pour commencer, procédez comme suit :

1. Créez un nouveau projet Next.js en exécutant la commande suivante dans votre terminal :

   npx create-next-app@latest test-tutoriel

2. Après avoir créé le projet, accédez au répertoire du projet en exécutant :

   cd nextjs-test-tutoriel

3. Installez les dépendances nécessaires comme devDependencies en exécutant la commande suivante :

   npm install npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Une fois le projet configuré et les dépendances installées, vous êtes maintenant prêt à créer l'application Next.js et à écrire des tests unitaires à l'aide de Jest.

Créer le composant de tâche

Dans le /src répertoire du projet, ouvrez le pages/index.js fichier, supprimez le code passe-partout Next.js existant et ajoutez le code suivant.

Tout d'abord, effectuez les importations suivantes et définissez deux fonctions qui géreront les tâches des utilisateurs: addTodo fonction et deleteTodo fonction.

importer { useState } depuis"réagir";
importer modes depuis"../styles/Accueil.module.css";
exporterdéfautfonctionMaison() {
constante [todos, setTodos] = useState([]);
constante [newTodo, setNewTodo] = useState("");
constante addTodo = () => {
si (nouveauTodo.trim() !== "") {
constante updateTodos = [...todos, newTodo] ;
 setTodos (mis à jourTodos);
 setNewTodo("");
 }
 };
constante deleteTodo = (indice) => {
constante updateTodos = [...todos] ;
 mis à jourTodos.splice (index, 1);
 setTodos (mis à jourTodos);
 };

Le code utilise le useState crochet pour initialiser et mettre à jour les variables d'état: todos et nouveauTodo. Le addTodo La fonction ajoute une nouvelle tâche à la liste des tâches lorsque la valeur d'entrée n'est pas vide, tandis que la deleteTodo supprime une tâche spécifique de la liste en fonction de son index.

Maintenant, écrivez le code pour les éléments JSX rendus sur le DOM du navigateur.

retour (


 taper="texte"
 nom_classe={styles.input}
 valeur={newTodo}
 data-testid="todo-input"
 onChange={(e) => setNewTodo (e.target.value)}
 />
« add-todo »>
 Ajouter une tâche
 </button>
"liste de choses à faire">
 {todos.map((todo, index) => (


 {faire}
 </li>
 ))}
 </ul>
 {todos.map((todo, index) => (


 onClick={() => deleteTodo (index)}
 nom_classe={styles.bouton}
 data-testid={`supprimer-todo-${indice}`}
 >
 Supprimer
 </button>
 </div>
 ))}
 </div>
 );}

Rédaction de cas de test

Avant de commencer à écrire des scénarios de test, il est crucial de configurer Jest en fonction de vos exigences de test spécifiques. Il s'agit de créer et de personnaliser jest.config.js fichier, qui sert de base à votre configuration de test.

Dans le répertoire racine, créez un nouveau jest.config.js déposer. Ensuite, ajoutez le code suivant pour configurer Jest en conséquence :

constante nextJest = exiger("prochain / plaisanterie");
constante createJestConfig = nextJest({
 rép: "./",
});
constante customJestConfig = {
 moduleRépertoires: ["node_modules", "/"],
 testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig (customJestConfig);

Enfin, ouvrez le package.json fichier et ajoutez un nouveau script appelé test qui exécutera la commande blague --watchAll pour exécuter tous les cas de test et surveiller tout changement.

Une fois la mise à jour effectuée, vos scripts devraient ressembler à ceci :

"scénarios": {
"dev": "prochain développeur",
"construire": "prochaine construction",
"commencer": "le prochain départ",
"peluche": "voiture suivante",
"test": "blague --watchAll"
 },

Une fois les configurations en place, passez à l'écriture et à l'exécution des tests.

Test de l'application Next.js To-Do avec Jest

Dans le répertoire racine du projet, créez un nouveau dossier appelé __tests__. Jest recherchera les fichiers de test dans ce dossier. Dans ce dossier, créez un nouveau fichier appelé index.test.js.

Tout d'abord, effectuez les importations suivantes.

importer Maison depuis"../src/pages/index";
importer"@testing-library/jest-dom";
importer { fireEvent, render, screen, waitFor, act } depuis"@testing-library/réagir";

Écrivez un test pour voir si tous les éléments s'affichent correctement :

décrire("Application Todo", () => {
 il("rend l'application todo", () => {
 rendre(<Maison />);

 attendre (screen.getByTestId("todo-input")).toBeInTheDocument();
 attendre (screen.getByTestId(« add-todo »)).toBeInTheDocument();
 });
});

Le scénario de test vérifie que l'application To-Do et ses éléments s'affichent correctement. A l'intérieur du cas de test, le Maison le composant est rendu à l'aide de la rendre fonction de la bibliothèque de test.

Ensuite, des assertions sont faites à l'aide de attendre fonction pour s'assurer que des éléments spécifiques avec des ID de test, tels que todo-input sont présents dans la sortie rendue. Si ces éléments sont trouvés dans le DOM, le test réussit; sinon, il échoue.

Maintenant, exécutez la commande suivante pour exécuter le test.

test d'exécution npm

Vous devriez voir une réponse similaire si le test réussit.

Tester différentes actions et simuler des erreurs

Décrivez ces scénarios de test pour vérifier la fonctionnalité des fonctions Ajouter une tâche et Supprimer une tâche.

Commencez par écrire le scénario de test pour la fonctionnalité Ajouter une tâche.

 il("ajoute une tâche", asynchrone () => {
 rendre(<Maison />);

constante todoInput = screen.getByTestId("todo-input");
constante addTodoButton = screen.getByTestId(« add-todo »);
constante todoList = screen.getByTestId("liste de choses à faire");
attendre loi(asynchrone () => {
 fireEvent.change (todoInput, { cible: { valeur: "Nouveau Todo" } });
 addTodoButton.click();
 });
attendre attendre(() => {
 attendre (todoList).toHaveTextContent("Nouveau Todo");
 });
 });

L'extrait de code ci-dessus simule l'interaction de l'utilisateur en tapant dans un champ de saisie et en cliquant sur le bouton d'ajout. Ensuite, à l'aide d'une valeur d'entrée de tâche fictive, il vérifie si la valeur d'entrée est ajoutée avec succès à la liste de tâches.

Enregistrez le fichier et vérifiez le terminal. Le test devrait se relancer automatiquement et déconnecter les résultats de test similaires.

Pour simuler une erreur de test, modifiez l'ID de test du bouton d'ajout et relancez le test. Avec cette mise à jour, le test devrait échouer et déconnecter un message d'erreur indiquant l'erreur spécifique rencontrée.

Idéalement, dans une base de code plus large avec plusieurs contributeurs effectuant des modifications fréquentes, les tests jouent un rôle crucial dans l'identification des bogues potentiels qui pourraient entraîner des défaillances du système. En testant, vous pouvez facilement signaler les incohérences, telles que celle illustrée ci-dessus, et les résoudre au cours du développement.

Enfin, écrivez le scénario de test pour la fonctionnalité Supprimer les tâches.

 il("supprime une tâche", asynchrone () => {
 rendre(<Maison />);

constante todoInput = screen.getByTestId("todo-input");
constante addTodoButton = screen.getByTestId(« add-todo »);

 fireEvent.change (todoInput, { cible: { valeur: "Todo 1" } });
 fireEvent.click (addTodoButton);

constante deleteTodoButton = screen.getByTestId("supprimer-todo-0");
 fireEvent.click (deleteTodoButton);

constante todoList = screen.getByTestId("liste de choses à faire");
attendre attendre(() => {
 attendre (todoList).toBeEmptyDOMElement();
 });
 });

Encore une fois, il vérifie si la tâche est supprimée avec succès. Enregistrez le fichier pour exécuter le test.

Tests unitaires avec Jest

Ce guide vous a fourni les connaissances nécessaires pour écrire et exécuter des tests unitaires simples, en utilisant un composant To-Do comme exemple. Pour assurer la stabilité et la fiabilité des fonctionnalités de base de votre application et réduire les risques de problèmes inattendus dans les environnements de production, il est important de prioriser l'écriture de tests pour votre clé Composants.

De plus, vous pouvez améliorer votre approche de test en incorporant des tests instantanés et des tests de bout en bout.