Vérifiez que le bouton est désactivé dans react-testing-library

Question

J'ai un composant React qui génère un bouton, dont le contenu contient un élément <span> Comme celui-ci:

function Click(props) {
    return (
        <button disable={props.disable}>
            <span>Click me</span>
        </button>
    );
}

Je veux tester la logique de ce composant avec l'utilisation de react-testing-library Et mocha + chai.

Le problème que j'ai bloqué en ce moment est que le sélecteur getByText("Click me") retourne le noeud DOM <span>, Mais pour les tests, je dois vérifier l'attribut disable de l'attribut <button>. Quelle est la meilleure pratique pour gérer ces cas de test? Je vois quelques solutions, mais toutes semblent un peu décalées:

1. Utilisez data-test-id Pour l'élément <button>
2. Sélectionnez l'un des ancêtres du composant <Click /> Puis sélectionnez le bouton within(...) cette étendue
3. Cliquez sur l'élément sélectionné avec fireEvent et vérifiez que rien ne s'est passé

Pouvez-vous suggérer une meilleure approche?

Answer 1

Vous pouvez tester la prop désactivation du bouton simplement en utilisant @testing-library/react comme suit.

exemple:

   import { render } from '@testing-library/react';

   const {getByText} = render(<Click/>)

   expect(getByText('Click me').closest('button').disabled).toBeTruthy()