Test des composants React

Testez votre premier composant React à l'aide de Jest etreact-testing-library

Le moyen le plus simple de commencer à tester les composants React consiste à effectuer des tests d'instantané, une technique de test qui vous permet de tester les composants de manière isolée.

Si vous êtes familier avec les logiciels de test, c'est comme les tests unitaires que vous faites pour les classes: vous testez la fonctionnalité de chaque composant.

Je suppose que vous avez créé une application React aveccreate-react-app, qui vient déjà avecPlaisanterinstallé, le package de test dont nous aurons besoin.

Commençons par un simple test. CodeSandbox est un excellent environnement pour essayer cela. Commencez avec un bac à sable React et créez unApp.jscomposant dans uncomponentsdossier et ajoutez unApp.test.jsdéposer.

import React from 'react'

export default function App() {
return (
<div className=“App”>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
)
}

Notre premier test est stupide:

test('First test', () => {
  expect(true).toBeTruthy()
})

Lorsque CodeSandbox détecte des fichiers de test, il les exécute automatiquement pour vous, et vous pouvez cliquer sur le bouton Tests en bas de la vue pour afficher vos résultats de test:

Un fichier de test peut contenir plusieurs tests:

Faisons quelque chose d'un peu plus utile maintenant, pour tester réellement un composant React. Nous n'avons que App maintenant, qui ne fait rien de vraiment utile, alors configurons d'abord l'environnement avec une petite application avec plus de fonctionnalités: l'application de compteur que nous avons créée précédemment. Si vous l'avez sauté, vous pouvez revenir en arrière et lire comment nous l'avons construit, mais pour une référence plus facile, je l'ajoute à nouveau ici.

Il ne s'agit que de 2 composants: l'application et le bouton. Créer leApp.jsdéposer:

import React, { useState } from 'react'
import Button from './Button'

const App = () => {
const [count, setCount] = useState(0)


const incrementCount = increment => {
setCount(count + increment)
}


return (
<div>
<Button increment={1} onClickFunction={incrementCount} />
<Button increment={10} onClickFunction={incrementCount} />
<Button increment={100} onClickFunction={incrementCount} />
<Button increment={1000} onClickFunction={incrementCount} />
<span>{count}</span>
</div>
)
}


export default App

et leButton.jsdéposer:

import React from 'react'

const Button = ({ increment, onClickFunction }) => {
const handleClick = () => {
onClickFunction(increment)
}
return <button onClick={handleClick}>+{increment}</button>
}


export default Button

Nous allons utiliser lereact-testing-library, ce qui est d'une grande aide car cela nous permet d'inspecter la sortie de chaque composant et de leur appliquer des événements. Vous pouvez en savoir plus surhttps://github.com/kentcdodds/react-testing-libraryou en regardantcette vidéo.

Testons d'abord le composant Button.

Nous commençons par importerrenderetfireEventdereact-testing-library, deux aides. Le premier nous permet de rendre JSX. Le second nous permet d'émettre des événements sur un composant.

Créer unButton.test.jset placez-le dans le même dossier queButton.js.

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'

Les boutons sont utilisés dans l'application pour accepter un événement de clic, puis ils appellent une fonction transmise auonClickFunctionsoutenir. Nous ajoutons uncountvariable et nous créons une fonction qui l'incrémente:

let count

const incrementCount = increment => {
count += increment
}

Passons maintenant aux tests réels. Nous initialisons d'abord count à 0, et nous rendons un+1 Buttoncomposant passant un1àincrementet notreincrementCountfonction deonClickFunction.

Ensuite, nous obtenons le contenu du premier enfant du composant, et nous vérifions les sorties+1.

Nous procédons ensuite au clic sur le bouton, et nous vérifions que le décompte est passé de 0 à 1:

test('+1 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={1} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+1')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(1)
})

De même, nous testons un bouton +100, cette fois en vérifiant que la sortie est+100 and the button click increments the count of 100.

test('+100 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={100} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+100')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(100)
})

Testons maintenant le composant App. Il montre 4 boutons et le résultat dans la page. Nous pouvons inspecter chaque bouton et voir si le résultat augmente lorsque nous cliquons dessus, en cliquant plusieurs fois également:

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import App from './App'

test(‘App works’, () => {
const { container } = render(<App />)
console.log(container)
const buttons = container.querySelectorAll(‘button’)


expect(buttons[0].textContent).toBe(’+1’)
expect(buttons[1].textContent).toBe(’+10’)
expect(buttons[2].textContent).toBe(’+100’)
expect(buttons[3].textContent).toBe(’+1000’)


const result = container.querySelector(‘span’)
expect(result.textContent).toBe(‘0’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘11’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘111’)
fireEvent.click(buttons[3])
expect(result.textContent).toBe(‘1111’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘1211’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘1221’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1222’)
})

Vérifiez le code fonctionnant sur ce CodeSandbox:https://codesandbox.io/s/pprl4y0wq

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction:


Tech Wiki en ligne!