🇫🇷 Test Unitaire de Composant Riot avec Vitest (Node env)

Cet article traite des tests des composants Riot Input en utilisant Vitest et Riot-SSR dans un environnement Node.

Une deuxième méthode existe : Vitest dans un environnement JsDom (ou HappyDom) ; lisez cet article pour en savoir plus.

Avant de continuer, assurez-vous d'avoir un projet de base Riot+Vite et d'avoir créé au moins un composant. Si ce n'est pas le cas, vous pouvez lire mon article précédent sur la création d'un composant Input.

Ceci est une série d'articles sur RiotJS, pour créer des composants et apprendre les meilleures pratiques pour déployer une application en production. Je pars du principe que vous avez une compréhension de base de Riot ; cependant, n'hésitez pas à consulter la documentation Riot si nécessaire : https://riot.js.org/documentation/

Riot + Vitest + Riot-SSR

Vite est utilisé en tant que serveur de développement pour obtenir un rendu en temps réel de mon application Riot, et l'utilisation de Vitest pour les tests présente de nombreux avantages :

• Un exécuteur de tests qui utilise la même configuration que Vite (vite.config.js).
• Il offre une API compatible avec Jest (l'un des exécuteurs de tests les plus utilisés).
• Performances : il utilise des threads pour exécuter autant de tests que possible en parallèle.
• Configuration et installation faciles (presque aucune).

Ajoutez Vitest à votre projet Riot :

npm install -D vitest

Pour exécuter le test, ajoutez la section suivante à votre fichier package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

Et voilà pour Vitest ! Si vous avez besoin d'une configuration spécifique, ajoutez la propriété test dans votre fichier de configuration Vite vite.config.js. Documentation de la configuration: https://vitest.dev/config/

Écrire un premier test avec Riot-SSR

Nos tests utiliseront Riot SSR (Riot Server-Side Rendering) car il s'agit d'un module qui rend les composants Riot côté serveur.

Tout d'abord, ajoutez Riot-SSR à votre projet :

npm i -D @riotjs/ssr

Le module prend un composant Riot et le rend en HTML en type String (une chaîne de caractères); nous devons vérifier si nous obtenons le résultat attendu.

Cependant nous ne pouvons pas tester les événements des composants, tels que les changements de valeur, les clics de bouton, les types de touches, etc. Un environnement de Dom de navigateur, comme JsDom, est nécessaire pour tester la réactivité des composants Riot.

Créons un fichier tests/c-input.test.js et insérons le code suivant:

import { assert, describe, it } from 'vitest'
import render from '@riotjs/ssr'

import cInput from '../components/c-input.riot'

describe('Component c-input', () => {
    it('should render the input without props', () => {
        const html = render('c-input', cInput, {})

        assert.strictEqual(html, '<c-input><div class="field border"><input value="" type="text"></div></c-input>')
    })
});

Découpage du Code :

1. Les modules et le composant sont chargés.
2. Vitest fournit des utilitaires courants pour les tests, similaires à Mocha et Jest :
   • describe() est utilisé pour définir un groupe de tests
   • it() pour définir un test
   • assert() pour valider les tests
3. La fonction render() prend 3 arguments :
   • Premier: Le nom du composant construit sous forme de chaîne de caractères
   • Deuxième: Le module du composant
   • Troisième: Les props optionnels sont des propriétés passées aux composants.
4. Validez le résultat du HTML rendu sous forme de chaîne de caractères avec assert.strictEqual(result, expected).

Maintenant, lancez le test via la commande NPM :

npm run test

Nous obtenons le résultat suivant:

 DEV  v1.4.0 /riot-beercss

 ✓ tests/c-input.test.js (1)
   ✓ Component c-input (1)
     ✓ should load a basic input without props

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  13:41:34
   Duration  242ms (transform 108ms, setup 0ms, collect 128ms, tests 6ms, environment 0ms, prepare 35ms)

✅ Le test réussit. Vitest écoute les modifications et affichera le résultat lorsqu'un nouveau test sera créé.

Tests Avancés

L'objectif est maintenant de tester tous les états de l'Input en passant des props aux composants.

Essayons de tester une valeur par défaut:

   it('should render the input with a default value', () => {
        const _htmlExpected = '<c-input><div class="field border"><input value="Firstname" type="text"></div></c-input>';
        const _html = render('c-input', cInput, { value: "Firstname"})

        assert.strictEqual(_html, _htmlExpected)
    })

Détails du Code :

1. Tout d'abord, le résultat HTML attendu est stocké dans une constante.
2. Le composant est construit avec une valeur de props value: "Firstname".
3. Le résultat est validé avec l'expression d'assertion. Dans ce cas, tout est correct.

Maintenant, nous pouvons répliquer cette méthode de test pour toutes les props et plusieurs props combinées : Créons un Input arrondie de petite taille avec un type "Password", une étiquette (label) et une erreur.

it('should render multiple props: label, type, error and round', () => {
    const _htmlExpected = '<c-input><div class="field border round invalid label"><input value="" type="password"><label>Password</label><span class="error">The password is too show, minimum 20 characters.</span></div></c-input>';
    const _html = render('c-input', cInput, { label: "Password", type: "password", error: "The password is too show, minimum 20 characters.", round: true})

    assert.strictEqual(_html, _htmlExpected)
})

Détails du Code:

1. Plusieurs props sont passées à la fonction render().
2. Une constante String est créée avec le résultat HTML attendu.

Le test passe ✅

Trouvez tous les tests de l'Input dans le dépôt GitHub suivant: https://github.com/steevepay/riot-beercss/blob/main/tests/c-input.node.test.js

Conclusion

Combiner Riot-SSR avec Vitest est une bonne méthode pour tester rapidement le rendu des composants Riot, mais cela ne fournit pas de navigateur pour tester les événements HTML.

N'hésitez pas à commenter si vous avez des questions ou besoin d'aide concernant RiotJS.

Passez une excellente journée ! Santé 🍻