Maîtriser les fonctionnalités et techniques avancées de la bibliothèque de tests JEST React / Blogs / Perficient

Bienvenue dans un voyage plus profond dans le monde de la bibliothèque de tests JEST React ! Nous explorerons ici des méthodes et astuces avancées qui améliorent votre expertise en matière de tests. Si vous êtes nouveau sur JEST, ne vous inquiétez pas ! Nous avons ce qu’il vous faut avec « Explorer la bibliothèque de tests JEST React : un aperçu complet,» qui vous aide à comprendre les informations de base et avancées, garantissant une compréhension complète des tests JEST. Allez vérifier ça bien ici.

Commençons maintenant à explorer les fonctionnalités et techniques avancées.

1. Simulation des interactions utilisateur

La bibliothèque de tests JEST React vous permet de simuler les interactions des utilisateurs avec vos composants. Cette fonctionnalité vous permet de tester la façon dont vos composants répondent aux différentes actions de l’utilisateur. Voici quelques exemples:

un. Simulation de clics sur des boutons

Le code ci-dessous définit un composant fonctionnel simple nommé « Bouton » cela prend un accessoire nommé « étiquette » et restitue un élément de bouton avec l’étiquette fournie.

Bouton.js :

import React from "react";
const Button = ({ label, onClick }) => {
  return <button onClick={onClick}>{label}</button>;
};
export default Button;

Bouton.test.js :

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import Button from "./Button";
test("button click triggers an action", () => {
  const handleClick = jest.fn();
  render(<Button label="Click me" onClick={handleClick} />);
  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Dans cet exemple, nous définissons une fonction fictive « poignéeCliquez » en utilisant « est.fn()”. Nous passons cette fonction comme accessoire au « Bouton » composant. Après avoir rendu le composant, nous simulons un clic de bouton en utilisant « fireEvent.clic » et affirmer que le « poignéeCliquez » la fonction est appelée une fois. Vous trouverez ci-dessous une capture d’écran du résultat montrant l’exécution réussie des cas de test :

b. Simulation du changement de valeur d’entrée

Le code ci-dessous définit un composant fonctionnel simple nommé « Formulaire de connexion » qui comprend un champ de saisie contrôlé pour capturer un nom d’utilisateur. Le « état d’utilisation » hook gère l’état du nom d’utilisateur et l’entrée est associée à une étiquette, permettant aux utilisateurs de saisir leur nom d’utilisateur. Tout changement déclenche le « handleInputChange » fonction, en gardant l’état du nom d’utilisateur synchronisé avec la valeur d’entrée.

LoginForm.js :

import React, { useState } from "react";
const LoginForm = () => {
  const [username, setUsername] = useState("");
  const handleInputChange = (e) => {
    setUsername(e.target.value);
  };
  return (
    <div>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        value={username}
        onChange={handleInputChange}
      />
    </div>
  );
};
export default LoginForm;

LoginForm.test.js :

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import LoginForm from "./LoginForm";
test("Typing in username field updates the value", () => {
  render(<LoginForm />);
  const usernameInput = screen.getByLabelText(/username/i);
  fireEvent.change(usernameInput, { target: { value: "testuser" } });
  expect(usernameInput.value).toBe("testuser");
});

Dans cet exemple, nous rendons un « Formulaire de connexion » composant qui contient un champ de saisie pour le nom d’utilisateur. Nous utilisons « écran.getByLabelText » pour trouver le champ de saisie et « fireEvent.change » pour simuler le changement de valeur d’entrée dans le champ. Enfin, nous affirmons que la valeur du champ de saisie est correctement mise à jour. Vous trouverez ci-dessous une capture d’écran du résultat montrant l’exécution réussie des cas de test :

2. Test du comportement asynchrone

Le « Information produit » Le composant est un composant fonctionnel React qui récupère les données produit de «https://fakestoreapi.com/products/1» en utilisant le « récupérer les données du produit » fonction. Les données sont stockées dans l’état des données à l’aide de « état d’utilisation ». Le « utiliserEffet » le hook garantit que la récupération des données se produit lors du montage du composant. Le composant restitue conditionnellement soit le « titre » des données ou un « Chargement… » message en fonction de la disponibilité des données.

ProduitInformation.js :

import React, { useEffect, useState } from 'react';
const ProductInformation = () => {
  const [data, setData] = useState(null);
  const fetchProductData = async () => {
    const response = await fetch('https://fakestoreapi.com/products/1');
    const data = await response.json();
    setData(data);
  };
  useEffect(() => {
    fetchProductData();
  }, []);
  return (
    <div>
      {data ? (
        <div>
          <p>title: {data.title}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};
export default ProductInformation;

ProductInformation.test.js :

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import ProductInformation from "./ProductInformation";

test("displays fetched data", async () => {
  render(<ProductInformation />);
  const loadingElement = screen.getByText(/loading/i);
  expect(loadingElement).toBeInTheDocument();
  await waitFor(() => {
    const dataElement = screen.getByText(/title: /i);
    expect(dataElement).toBeInTheDocument();
  });
});

Dans cet exemple, nous rendons le « Information produit » composant, qui récupère les données de manière asynchrone. Au départ, nous nous attendons à voir un message de chargement. En utilisant « attendre » et « attendre », nous attendons que les données soient récupérées, puis affirmons que les données sont affichées. Vous trouverez ci-dessous une capture d’écran du résultat montrant l’exécution réussie des cas de test :

Conclusion

Dans cette deuxième partie de notre guide, nous avons approfondi les fonctionnalités et techniques avancées de la bibliothèque de tests JEST React. Nous avons exploré la simulation des interactions des utilisateurs et la gestion des comportements asynchrones. La combinaison des connaissances des deux parties de ce guide vous permet d’écrire des tests complets pour vos composants React, garantissant ainsi leur fiabilité et leur robustesse.