Test du contexte ReactJS - Un guide avec des tests doubles

Dans cet article, je vais parcourir mon processus de réflexion pour tester les composants React qui s'appuient sur le contexte, à l'aide de la bibliothèque de tests. Mon objectif est d'explorer une approche différente pour tester ces composants, en examinant les avantages et les inconvénients de l'utilisation de simulations par rapport aux tests sans se moquer du contexte. Nous examinerons l'impact de chaque approche sur la fiabilité des tests, et je partagerai des informations sur quand et pourquoi une méthode peut être plus bénéfique qu'une autre dans des applications réelles.

Ce que vous devez savoir

• À quoi sert Reactjs (vous avez probablement déjà écrit quelques applications)
• Qu'est-ce que le vitest

Qu'est-ce que le contexte de réaction

Le contexte ReactJS est apparu comme une solution à un problème courant dans la structure des composants ReactJS : le forage d'accessoires. Le forage accessoire se produit lorsque nous avons une chaîne de composants qui doivent accéder au même ensemble de données. Le mécanisme de contexte permet aux composants de partager le même ensemble de données tant que le contexte lui-même est le premier descendant.

Dans la documentation de Reactjs, le contexte pour contenir le thème est utilisé, car d'autres composants peuvent avoir besoin de ces informations, la documentation utilise le contexte pour gérer cela au lieu de transmettre la valeur via des accessoires. Un autre exemple est l'utilisation du contexte pour contenir la mise en page de l'application, dans l'exemple json-tool, App.tsx enveloppe l'application avec un contexte DefaultLayout qui est disponible pour toute l'application.

L'application pour cet exemple

Pour l'exemple qui suit, l'application thématique sera utilisée. C'est une application qui permet aux utilisateurs de basculer entre les thèmes clairs/sombres. L'application est également utilisée dans la documentation officielle de Reactjs. Cette application consiste en une simple bascule qui bascule entre le mode thème clair et le mode thème sombre. L'application est aussi simple que possible et nous pouvons tout tracer dans un seul fichier :

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

Dans cette application, nous avons deux composants principaux : l'application et la page. Le composant App sert de composant principal et contient l'état du thème actuel, qui peut être « clair » ou « sombre ». Il comprend également un bouton qui bascule le thème entre les modes clair et sombre. Le composant Page est un enfant de App et consomme le contexte du thème pour afficher le thème actuel. Le bouton du composant App est un simple bouton à bascule qui, lorsque vous cliquez dessus, change de thème et met à jour la valeur du contexte en conséquence.

Dans la section suivante, nous parlerons du découpage des composants à tester.

L'enflammer pour tester

Habituellement, dans toute application, nous devons nous concentrer sur le type de test que nous voulons faire et sur la tranche que nous voulons aborder. Par exemple, nous pourrions cibler un seul composant plutôt que l’ensemble de l’application. Dans notre exemple, nous commencerons par le composant Page. Ce qui nous obligera à utiliser des tests-doubles pour le tester.

Le test-double vient de la structure de l'application elle-même, car il dépend du contexte, pour le changer, la valeur dans le contexte doit également changer.

Test-double

Pour commencer notre approche de test avec contexte dans Reactjs, nous allons commencer à écrire le premier test :

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

Ce test réussira comme prévu, étant donné que le thème clair est défini comme étant celui par défaut dans ThemeContext. Nous pourrions même tester ce premier exemple également, cependant, les choses deviennent intéressantes dans le deuxième test, lorsque nous nous intéressons au thème sombre. Pour entrer dans le thème sombre, nous devons commencer à utiliser des tests-doubles, étant donné que nous dépendons du contexte Reactjs pour ce faire. Le deuxième test apporte le vi.mock au mix ainsi que le vi.mocked. A noter que le deuxième test à rédiger nécessitait également de modifier le premier.

import { render, screen } from '@testing-library/react'
import { Page } from './Page'

describe('<Page />', () => {
  it('should render light as default theme', () => {
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

Les deux cas de test utilisent désormais un faux pour tester l'application. Si nous modifions les données de retour du contexte, le test changera également. Les points d'attention ici sont :

• Nous nous moquons du contexte de Reactjs qui rejette le principe "ne vous moquez pas de ce qui ne vous appartient pas"
• Le test devient plus verbeux, puisque nous devons utiliser la moquerie pour ce faire
• Les deux tests que nous avons rédigés ne reflètent pas l'interaction de l'utilisateur avec l'application. Nous savons que le thème changera lorsque vous cliquerez sur le bouton bascule.

Le code complété utilisé dans cette section est disponible sur GitHub

Sans test-double

L'approche suivante consiste à utiliser le contexte intégré dans notre application, sans l'isoler ni utiliser de double test. Si nous adoptons cette approche avec TDD, nous pouvons commencer par un test très simple qui simule le comportement de l'utilisateur :

import { render, screen } from '@testing-library/react'
import { Page } from './Page'
import { useContext } from 'react'

vi.mock('react', () => {
  return {
    ...vi.importActual('react'),
    useContext: vi.fn(),
    createContext: vi.fn()
  }
})

describe('<Page />', () => {
  it('should render light as default theme', () => {
    vi.mocked(useContext).mockReturnValue('light')
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })

  it('should render dark theme', () => {
    vi.mocked(useContext).mockReturnValue('dark')
    render(<Page />)
    expect(screen.getByText('current theme: dark')).toBeInTheDocument()
  })
})

Puis suite au deuxième test, que nous aimerions définir le thème lumineux par défaut :

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })
})

et enfin et surtout le changement de thème :

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })

  it('should render light as default theme', () => {
    render(<App />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

Points d'attention à cette stratégie :

• Les tests-doubles ne sont pas nécessaires, cela fait le test avec moins de code
• Le comportement du test correspond à ce que l'utilisateur fera dans l'application réelle

Le code complété utilisé dans cette section est disponible sur GitHub

Avantages et inconvénients de chaque approche

Dans cette section, nous passerons en revue les avantages et les inconvénients de chaque approche en ce qui concerne différentes propriétés.

Refactorisation vers les accessoires

Utiliser un test-double pour le contexte rend le test fragile pour ce genre de changement. La refactorisation de l'utilisation de useContext avec des accessoires fait automatiquement échouer le test même lorsque le comportement ne le fait pas. L'utilisation de l'option qui n'utilise pas de test-double prend en charge la refactorisation dans ce sens.

Création d'un contexte personnalisé

La même chose se produit lors de l'utilisation d'un contexte personnalisé au lieu de s'appuyer directement sur le fournisseur de contexte de Reactjs. L'utilisation de l'option sans test-doubles permet la refactorisation.

Conclusion

Dans ce guide, nous avons exploré comment tester des composants qui s'appuient sur le contexte, sans avoir besoin de doubles de tests, rendant les tests plus simples, plus proches des interactions réelles des utilisateurs et contrastant les avantages et les inconvénients de chaque approche. Dans la mesure du possible, il convient d'utiliser une approche simple qui reflète l'interaction de l'utilisateur. Cependant, lorsque des tests doubles sont nécessaires, ils doivent être utilisés en ciblant la maintenabilité du code de test. Disposer d'un test simple permet de refactoriser le code de production en toute confiance.

Ressources

• Créer un contexte personnalisé
• Le catalogue de refactoring
• utilisé pour trouver comment se moquer d'une partie spécifique d'un module avec vitest
• utilisé pour trouver comment résoudre un problème de type
• test de la bibliothèque userEvent

Prochaines étapes

• Essayez de tester des scénarios plus complexes impliquant plusieurs contextes ou fournisseurs imbriqués.
• Bien que nous ayons évité les moqueries dans ce guide, il existe des cas où les moqueries sont nécessaires. Explorez des techniques de moquerie avancées pour ces scénarios.

En suivant ces étapes, vous pouvez continuer à améliorer vos compétences en matière de tests et vous assurer que vos applications React sont ouvertes au refactoring.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!