web-dev-qa-db-fra.com

Comment tester un className avec Jest et React tester la bibliothèque

Je suis totalement nouveau dans les tests JavaScript et je travaille dans une nouvelle base de code. Je voudrais écrire un test qui recherche un className sur l'élément. Je travaille avec Jest et react-testing-library. Ci-dessous, j'ai un test qui rendra un bouton basé sur le variant prop. Il contient également un nom de classe et .Je voudrais tester cela.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

J'ai essayé de google pour une propriété comme Enzyme a avec hasClass mais je n'ai rien trouvé. Est-ce que quelqu'un sait comment résoudre ce problème avec les bibliothèques actuelles (réag-testing-library, Jest)?

javascriptreactjsjestjsreact-testing-library
12
Gijsberts

Vous pouvez facilement le faire avec react-testing-library.

Tout d'abord, vous devez comprendre que container ou le résultat de getByText etc. ne sont que des nœuds DOM. Vous pouvez interagir avec eux de la même manière que vous le feriez dans un navigateur.

Donc, si vous voulez savoir quelle classe est appliquée à container.firstChild vous pouvez simplement le faire comme ça container.firstChild.className.

Si vous en lisez plus à propos de className dans MDN , vous verrez qu'il renvoie all les classes appliquées à votre élément séparées par un espace, c'est-à-dire:

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

Cela peut ne pas être la meilleure solution selon votre cas. Pas de problème, vous pouvez utiliser une autre API de navigateur, par exemple classList .

expect(container.firstChild.classList.contains('foo')).toBe(true)

C'est ça! Pas besoin d'apprendre une nouvelle API qui ne fonctionne que pour les tests. C'est comme dans le navigateur.

Si vous recherchez souvent une classe, vous pouvez faciliter les tests en ajoutant jest-dom à votre projet.

Le test devient alors:

expect(container.firstChild).toHaveClass('foo')

Il existe de nombreuses autres méthodes utiles comme toHaveStyle qui pourraient vous aider.

A noter que react-testing-library est un utilitaire de test JavaScript approprié. Il présente de nombreux avantages par rapport aux autres bibliothèques. Je vous encourage à rejoindre le forum du spectre si vous débutez dans les tests en JavaScript.

25
Giorgio Polvara - Gpx

Vous devez comprendre la philosophie sous-jacente de react-testing-library pour comprendre ce que vous pouvez faire et ce que vous ne pouvez pas en faire.

Le but de react-testing-library est que les tests évitent d’inclure les détails d’implémentation de vos composants et se concentrent plutôt sur la rédaction de tests qui vous donnent la confiance à laquelle ils sont destinés.

Ainsi, l'interrogation élément par nom de classe n'est pas alignée sur la philosophie de réag-testing-bibliothèque, car elle inclut les détails d'implémentation. Le nom de classe est le détail d'implémentation d'un élément. Il ne sera pas visible par l'utilisateur final et il est sujet à modification à tout moment. cycle de vie de l'élément. Ainsi, au lieu de rechercher un élément par ce que l'utilisateur ne peut pas voir et quelque chose qui peut changer à tout moment, essayez simplement de rechercher en utilisant quelque chose que l'utilisateur peut voir, tel que du texte, une étiquette ou quelque chose qui restera constant dans le cycle de vie de l'élément, comme ID de données.

Donc, pour répondre à votre question, il n’est pas conseillé de tester classname et vous ne pouvez donc pas le faire avec react-testing-library. Essayez avec d’autres bibliothèques de tests telles que enzyme ou tests réact-dom

5
kasongoyo