Je suis totalement nouveau dans les tests JavaScript et je travaille dans une nouvelle base de code. Je voudrais écrire un test qui vérifie un nom de classe sur l'élément. Je travaille avec Jest et react-testing-library. Ci-dessous, j'ai un test qui rendra un bouton basé sur l'accessoire variant. 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 rechercher sur Google une propriété comme Enzyme avec hasClass mais je n'ai rien trouvé. Quelqu'un sait-il comment résoudre ce problème avec les bibliothèques actuelles (react-testing-library, Jest)?

54
Giesburts 20 nov. 2018 à 12:31

4 réponses

Meilleure réponse

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 s'applique container.firstChild, vous pouvez le faire comme ceci container.firstChild.className.

Si vous en savoir plus sur className dans MDN vous verrez qu'il retourne toutes 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'

Ce n'est peut-être pas la meilleure solution selon votre cas. Pas de soucis, vous pouvez utiliser une autre API de navigateur, par exemple {{X0 }}.

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

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

Si la vérification d'une classe est quelque chose que vous faites souvent, vous pouvez faciliter les tests en ajoutant jest-dom à votre projet.

Le test devient alors:

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

Il existe un tas d'autres méthodes pratiques comme toHaveStyle qui pourraient vous aider.


En remarque, react-testing-library est un bon utilitaire de test JavaScript. Il présente de nombreux avantages par rapport aux autres bibliothèques. Je vous encourage à rejoindre le forum du spectre si vous êtes nouveau dans les tests JavaScript.

44
Giorgio Polvara - Gpx 20 nov. 2018 à 14:47

Comme mentionné par d'autres personnes, vous devrez utiliser une enzyme. Configurez l'enzyme pour votre application avant d'essayer la structure de code ci-dessous.

Un exemple simple d'utilisation de hasclass

import React from 'react'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import { shallow } from 'enzyme';

describe('<CreateCode /> component tests', () => {

it('Shallow renders CreateCode component', () => {
    const wrapper = shallow(<CreateCode />).dive();
    expect(wrapper.hasClass('container')).toEqual(true);
});

});

Toutes mes excuses pour le formatage

-10
Manish Poduval 21 nov. 2018 à 09:39

Vous devez comprendre la philosophie derrière react-testing-library pour comprendre ce que vous pouvez faire et ce que vous ne pouvez pas en faire;

L'objectif derrière 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 l'écriture de tests qui vous donnent la confiance pour laquelle ils sont destinés.

Ainsi, l'interrogation d'un élément par nom de classe n'est pas alignée sur la philosophie de react-testing-library car elle inclut les détails d'implémentation, le nom de classe est en fait le détail d'implémentation d'un élément et n'est pas quelque chose que l'utilisateur final verra et il est susceptible de changer à tout moment dans le cycle de vie de l'élément. Donc, au lieu de rechercher l'é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 comme du texte, une étiquette ou quelque chose qui restera constant dans le cycle de vie de l'élément comme data-id.

Donc, pour répondre à votre question, il n'est pas conseillé de tester le nom de classe et donc vous ne pouvez pas le faire avec react-testing-library. Essayez avec d'autres bibliothèques de tests telles que les enzymes ou les utilitaires de test react-dom

10
kasongoyo 28 mai 2019 à 05:58

Au début, vous devez utiliser un JavaScript Testing utility approprié, tel que:

Ces bibliothèques vous fourniront plusieurs méthodes pour affirmer votre application, vous pouvez donc simplement affirmer votre cas actuel comme ceci:

Avec Enzyme:

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

Documentation: Enzyme hasClass


Avec Chai-Enzyme:

const wrapper = mount(<MyComponent />);

expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');

Documentation: chai-enzyme className

-17
Marcos Gonçalves 20 nov. 2018 à 10:03