Module 2Construire une application React
Chapitre 13 sur 18
Quoi tester, les tests avec Enzyme (shallow, find, simulate, state), npm test, et les mêmes tests avec React Testing Library.
Objectifs
Avec ce chapitre, tu sauras…
describe, it et expect ;shallow, find), simuler un clic et vérifier l'état ;npm test ;Leçon 1
Sur une application front-end, la question revient souvent : que faut-il tester ? Tester précisément le rendu visuel d'un composant de présentation serait laborieux, et le moindre changement de CSS pourrait faire échouer le test, ce qui n'est pas le but.
Il est tout de même intéressant de tester certains composants :
Leçon 2
Enzyme est un utilitaire de test JavaScript pour tester facilement les composants React : il affiche les composants en mode test. Il s'utilise avec Jest, le lanceur de tests installé par create-react-app.
npm install --save-dev enzyme
npm install --save-dev enzyme-adapter-react-16 --forceL'adaptateur (enzyme-adapter-react-16) relie Enzyme à la version de React. L'option --force est nécessaire car l'adaptateur demande React 16 alors que le projet est en React 18.
Le premier cas de test
Étape 1 : le composant affiche un bouton Click Me.
import React, { Component } from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<button className="click-me" id="ClickMe">Click Me</button>
</div>
)
}
};
export default App;Étape 2 : on écrit le test dans App.test.js, le fichier des cas de test.
import React from 'react'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import App from './App'
Enzyme.configure({ adapter: new Adapter() })
describe('Test Case For App', () => {
it('should render button', () => {
const wrapper = shallow(<App />)
const buttonElement = wrapper.find('#ClickMe');
expect(buttonElement).toHaveLength(1);
expect(buttonElement.text()).toEqual('Click Me');
})
})Étape 3 : on lance les tests :
npm testJest affiche PASS et « ✓ should render button ».
| Instruction | Rôle |
|---|---|
Enzyme.configure({ adapter: new Adapter() }) | configure Enzyme avec l'adaptateur de React |
describe('…', () => { … }) | regroupe plusieurs tests sous un titre |
it('…', () => { … }) (ou test) | un cas de test |
shallow(<App />) | affiche le composant en surface (sans afficher ses composants enfants) et renvoie un wrapper |
wrapper.find('#ClickMe') | trouve les éléments avec un sélecteur CSS (#id, .classe, button) |
expect(x).toHaveLength(1) | vérifie qu'on a trouvé exactement 1 élément |
expect(x).toEqual('Click Me') | vérifie que la valeur est égale à celle attendue |
.text() | le texte de l'élément |
Leçon 3
| Commande | Effet |
|---|---|
npm test (create-react-app) | lance Jest en mode surveillance : les tests sont relancés à chaque modification ; a relance tout, q quitte |
npx vitest (projet Vite) | lance Vitest, l'équivalent de Jest pour Vite (mêmes describe, it, expect) |
Leçon 4
| Enzyme | React Testing Library |
|---|---|
shallow(<App />) | render(<App />) |
wrapper.find('#ClickMe') | screen.getByText('Click Me') ou screen.getByRole('button', { name: 'Click Me' }) |
buttonElement.simulate('click') | fireEvent.click(bouton) (ou userEvent.click) |
wrapper.state('IamDisabled') (état interne) | expect(bouton).toBeDisabled() (ce que voit l'utilisateur) |
fonctionne seulement avec les classes pour state() |
1Enzyme sert à…
2Le fichier des tests de App s'appelle…
3describe sert à…
4shallow(<App />) affiche…
5Pour simuler un clic avec Enzyme, on écrit…
6expect(x).toHaveLength(1) vérifie que…
7La commande qui lance les tests est…
8Avec React Testing Library, on vérifie qu'un bouton est désactivé avec…
L'essentiel du chapitre
npm install --save-dev enzyme enzyme-adapter-react-16, Enzyme.configure({ adapter: new Adapter() }).describe (groupe) → it / test (un cas) → expect(…) + toHaveLength, toEqual, toBe.shallow(<App />), wrapper.find('#id'), .text(), .simulate('click'), wrapper.state('x').npm test (Jest, mode surveillance) ; avec Vite : Vitest.render, screen.getByText / getByRole, fireEvent.click, toBeInTheDocument, toBeDisabled.| fonctionne pareil avec les fonctions et les hooks |
Vidéo · À regarder
FRApprendre React : Tester du code react
Grafikart · YouTube
Le cas de test pour la variable d'état
On vérifie maintenant le clic et l'état désactivé d'un bouton.
Étape 1 : le composant compte les clics et a un deuxième bouton désactivé par l'état IamDisabled.
import React, { Component } from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
ClickCount:0,
IamDisabled : true
};
this.ClickMe = this.ClickMe.bind(this);
}
ClickMe(){
this.setState({
ClickCount:this.state.ClickCount + 1
});
}
render() {
return (
<div>
<button className="click-me" id="ClickMe" onClick={this.ClickMe}>Click Me</button>
<p>You clicked me :: {this.state.ClickCount}</p>
<button className="click-me" disabled={this.state.IamDisabled}>Disabled</button>
</div>
)
}
};
export default App;Étape 2 : les tests.
import React from 'react'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import App from './App'
Enzyme.configure({ adapter: new Adapter() })
describe('Test Case For App', () => {
it('should render button', () => {
const wrapper = shallow(<App />)
const buttonElement = wrapper.find('#ClickMe');
expect(buttonElement).toHaveLength(1);
expect(buttonElement.text()).toEqual('Click Me');
}),
it('increments count by 1 when button is clicked', () => {
const wrapper = shallow(<App />);
const buttonElement = wrapper.find('#ClickMe');
buttonElement.simulate('click');
const text = wrapper.find('p').text();
expect(text).toEqual('You clicked me :: 1');
});
})
describe('Test Case for App Page', () => {
test('Validate Disabled Button disabled', () => {
const wrapper = shallow(
<App />
);
expect(wrapper.state('IamDisabled')).toBe(true);
});
});buttonElement.simulate('click') simule un clic sur le bouton ;wrapper.state('IamDisabled') lit directement l'état du composant classe ; toBe(true) vérifie qu'il vaut true.Résultat de npm test : 3 tests passés (2 suites).
Le support sépare les deux it par une virgule (}),) : JavaScript l'accepte (opérateur virgule), mais ce n'est pas l'usage ; on écrit simplement les appels l'un sous l'autre, terminés par ;.
Jest trouve tout seul les fichiers *.test.js (ou *.spec.js, ou dans un dossier __tests__).
React Testing Library (RTL) est déjà installée dans les projets create-react-app (le fichier App.test.js d'origine l'utilise). Elle teste le composant comme un utilisateur : on cherche les éléments par leur texte ou leur rôle (bouton, titre…), et non par leur état interne.
# seulement si elle n'est pas installée (projet Vite : ajouter vitest et jsdom)
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-eventLes trois tests du support, écrits avec RTL :
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import App from './App';
describe('Test Case For App', () => {
it('should render button', () => {
render(<App />);
const buttonElement = screen.getByText('Click Me');
expect(buttonElement).toBeInTheDocument();
});
it('increments count by 1 when button is clicked', () => {
render(<App />);
fireEvent.click(screen.getByText('Click Me'));
expect(screen.getByText('You clicked me :: 1')).toBeInTheDocument();
});
it('Validate Disabled Button disabled', () => {
render(<App />);
expect(screen.getByText('Disabled')).toBeDisabled();
});
});Avec React Testing Library, teste le Validator du chapitre 7 : le message d'erreur s'affiche au départ ; il disparaît quand on tape « abcd » (fireEvent.change(champ, { target: { value: 'abcd' } })).
Explique ligne par ligne ce que vérifie ce test, et dis s'il passe avec le composant App de la section 2.
it('counts two clicks', () => {
const wrapper = shallow(<App />);
const btn = wrapper.find('#ClickMe');
btn.simulate('click');
btn.simulate('click');
expect(wrapper.find('p').text()).toEqual('You clicked me :: 2');
});Ce que tu vas voir : le formateur installe les outils de test dans un projet React, écrit un fichier de test avec describe, it et expect, affiche un composant avec render, cherche des éléments par leur texte ou leur rôle, simule un clic et vérifie le nouvel affichage, puis lance les tests dans le terminal. C'est la section 4, et les mêmes réflexes que les tests Enzyme du support.
Écris les tests (Enzyme ou React Testing Library) du composant Compteur du chapitre 11 (boutons « incrementer » et « decrementer », titre « compteur: n ») : (1) il affiche « compteur: 0 » au départ ; (2) un clic sur incrementer affiche 1 ; (3) incrementer puis decrementer deux fois affiche -1.