Tester une application ReactJS avec Vitest

Dans cet article nous allons mettre en place très simplement une application ReactJS avec un test. Nous allons partir de zéro, on va bootstrapper une application très simple et mettre en place Vitest et lancer notre premier test.

Installation de l’application

Nous allons utiliser Vite

npm create vite@latest react-vitest-demo

cd react-vitest-demo
npm install

Vitest fonctionne comme Jest mais avec les module ESM. J’ai eu des soucis à faire fonctionner Jest avec les modules ESM. Donc Vitest vient à point nommé.

Cependant on va utiliser des librairies de Jest (le framework de test) comme @testing-library/react et @testing-library/jest-dom

npm install -D vitest @testing-library/react @testing-library/jest-dom

ensuite il faut configurer le fichier de configuration de vite vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js'
  }
})

Plus spécifiquement il y a un fichier de setup, qui va initialiser jest-DOM pour avoir des matchers pratiques comme toBeInTheDocument(), dans src/setupTests.js

import '@testing-library/jest-dom'

Il manque un composant à installer jsdom

npm i -D jsdom

Création d’un composant à tester

On va créer un simple composant Hello.jsx

export default function Hello({ name }) {
  return <h1>Hello {name}!</h1>
}

Ainsi que le test du composant

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

test('affiche le nom passé en prop', () => {
  render(<Hello name="Yvon" />)
  expect(screen.getByText(/Hello Yvon!/i)).toBeInTheDocument()
})

On va lancer le test avec la command npm test, donc il faut que dans le package.json, ce script soit présent.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "test": "vitest",
  "test:ui": "vitest --ui"
}

Pour lancer le test:

npm test

Le résultat

PS E:\react-vitest-demo> npm test

> react-vitest-demo@0.0.0 test
> vitest


 DEV  v3.2.4 E:/react-vitest-demo

 ✓ src/Hello.test.jsx (1 test) 16ms
   ✓ affiche le nom passé en prop 16ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  22:09:08
   Duration  675ms (transform 25ms, setup 70ms, collect 68ms, tests 16ms, environment 325ms, prepare 58ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Avoir un visuel de ce que vous testez

Pour ce faire il faut installer le package vitest/ui

npm run test:ui

Test d’un composant interactif (Compteur incrémental)

Code du composant Counter

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}

Code du composant de test du Counter

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

test('incrémente le compteur quand on clique', () => {
  render(<Counter />)
  const button = screen.getByText('+1')
  fireEvent.click(button)
  expect(screen.getByText(/Count: 1/i)).toBeInTheDocument()
})

Test en ligne de commande

Test graphique

Mise en oeuvre des tests dans Github Actions

L’idée est d’automatiser le déploiement de votre application quand vous faites un git push, avouez que c’est super non? En effet à l’ancienne vous deviez vous connecter à votre terminal de serveur puis faire un git pull. Bien qu’il y ait les webhook de github, qui permettent de s’affranchir de cette étapes, ces derniers ne permettaient pas de faire des processus de déploiement plus sophistiqués. Cet article sur Github Action va vous montrer comment simplement mettre en oeuvre pour un projet front-end, ce processus de déploiement.