web-dev-qa-db-fra.com

Comment tester un composant composé d'autres composants avec react-testing-library?

Je suis complètement nouveau sur react-testing-library. Je viens de commencer à lire toute la documentation et les articles de blog "Getting Started" que j'ai pu trouver après que je n'ai pas réussi à tester un composant avec Enzyme. La plupart des exemples que j'ai pu trouver sont assez simples, comme ceux du blog "Présentation de la bibliothèque react-testing-library" . Je voudrais voir des exemples de la façon de tester un composant qui est lui-même composé de autre composants, car la composition des composants est l'une des plus grandes choses à propos de React ( dans ce SO post, j'appellerai un exemple d'un tel ComposedComponent faute d'un meilleur nom).

Quand j'ai écrit des tests pour un ComposedComponented dans Enzyme, je pouvais simplement affirmer que les accessoires corrects avaient été passés à certains ChildComponent et avoir confiance que ChildComponent avait ses propres tests et que je ne le ferais pas doivent être concernés par ce que ChildComponent a rendu réellement au DOM dans mes tests pour ComposedComponent. Mais avec react-testing-library, je crains que puisque "plutôt que de traiter des instances de composants react rendus, vos tests fonctionneront avec des nœuds DOM réels", je devrai également tester le comportement de ChildComponent par faire des affirmations sur les nœuds DOM qu'il rend en réponse à sa relation avec ComposedComponent. Cela signifierait que plus je monte dans la hiérarchie des composants dans une application React), plus mes tests deviendraient longs et exhaustifs. L'essentiel de ma question est le suivant: Comment puis-je tester le comportement d'un composant qui a d'autres composants comme enfants sans tester également le comportement de ces composants enfants?

J'espère vraiment que je souffre juste d'un manque d'imagination et que quelqu'un pourra m'aider à comprendre comment utiliser correctement cette bibliothèque qui a gagné un tel succès en remplacement d'Enzyme.

reactjsreact-testing-library
5
peterlawless

Ce que je fais lorsque je teste des composants qui rendent d'autres composants (déjà testés), c'est les simuler. Par exemple, j'ai un composant qui affiche du texte, un bouton et un modal. Le modal lui-même est déjà testé, donc je ne veux pas le tester à nouveau.

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ComponentUnderTest } from '.';

// Mock implementation of a sub component of the component being tested
jest.mock('../Modals/ModalComponent', () => {
  return {
    __esModule: true,
    // the "default export"
    default: ({ isOpen, onButtonPress }) =>
      isOpen && (
        // Add a `testid` data attribute so it is easy to target the "modal's" close button
        <button data-testid="close" onClick={onButtonPress} type="button" />
      ),
  };
});

describe('Test', () => {
  // Whatever tests you need/want
});
2
Drew Reese