Récupérer par élément HTML avec React Testing Library?
J'utilise la fonction getByTestId dans React Testing Library:
const button = wrapper.getByTestId("button");
expect(heading.textContent).toBe("something");
Est-il possible/conseillé de rechercher des éléments HTML à la place? Donc quelque chose comme ça:
const button = wrapper.getByHTML("button");
const heading = wrapper.getByHTML("h1");
Je ne sais pas ce que wrapper est dans ce cas. Mais pour répondre à vos deux questions: oui il est possible d'obtenir par élément HTML et non, ce n'est pas conseillé.
Voici comment vous le feriez:
// Possible but not advisable
const { container } = render(<MyComponent />)
// `container` is just a DOM node
const button = container.querySelector('button')
Puisque vous récupérez un nœud DOM, vous pouvez utiliser toutes les API DOM normales telles que querySelector .
Maintenant, pourquoi ce n'est pas conseillé. Un argument de vente important de react-testing-library est que vous testez vos composants comme le fait un utilisateur. Cela signifie ne pas se fier aux détails de mise en œuvre. Par exemple, vous n'avez pas d'accès direct à l'état d'un composant.
L'écriture de tests de cette façon est un peu plus difficile mais vous permet d'écrire des tests plus robustes.
Dans votre cas, je dirais que le HTML sous-jacent est un détail d'implémentation. Que se passe-t-il si vous modifiez votre structure HTML afin que le h1 est maintenant un h2 ou div? Le test se cassera. Si au lieu de cela, vous regardez ces éléments par texte, la balise devient hors de propos.
Dans certains cas, les assistants de requête normaux ne suffisent pas. Pour ces événements, vous pouvez utiliser un data-testid et utilisez getByTestId.