web-dev-qa-db-fra.com

Testez si un composant est rendu avec les bons accessoires avec React-Testing-Library

J'ai certains composants qui rendent un autre composant (FetchNextPageButton) qui est déjà testé isolément, comme ceux-ci:

const News = () => (
  <div>
    <h1>News</h1>
    ...
    <FetchNextPageButton query={NEWS_QUERY} path="viewer.news" />
  </div>
)

const Jobs = () => (
  <div>
    <h1>Jobs</h1>
    ...
    <FetchNextPageButton query={JOBS_QUERY} path="viewer.jobs" />
  </div>
)

const Posts = () => (
  <div>
    <h1>Posts</h1>
    ...
    <FetchNextPageButton query={POSTS_QUERY} path="viewer.posts" />
  </div>
)

Le fait est que je ne voudrais pas avoir à ajouter des tests sur chacun de ces composants pour une fonctionnalité qui est déjà testée ailleurs, donc je pense que cela devrait suffire juste pour tester que le composant est rendu et que je passe le les bons accessoires.

J'aurais pu tester cela facilement avec Enzyme avec quelque chose comme ceci:

expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({
  query: NEWS_QUERY,
  path: "viewer.news"
})

Je me demande donc quelle est la meilleure approche pour le tester en utilisant React testing library à la place.

javascriptreactjsjestjsreact-testing-library
3
Emi

Ne croyez pas que c'est possible. RTL semble se concentrer sur la validation par rapport à DOM et non à l'arborescence des composants de React.

La seule solution de contournement que je vois est de se moquer de FetchNextPageButton pour qu'il rende tous les accessoires en attributs.

jest.mock("../../../FetchNextPageButton.js", () => 
  (props) => <div data-test-id="FetchNextPageButton" {...props} />);
....
const { getByTestId } = render(<YourComponent />);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("query", NEWS_QUERY);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("path", "viewer.news");

Bien sûr, cela n'est fluide que pour les valeurs primitives dans les accessoires, mais valider quelque chose comme un objet ou une fonction serait plus difficile.

Pensez, ce n'est pas RTL, mais je conviens que ce serait un travail énorme de vérifier cela dans la portée de chaque conteneur (et ignorer complètement ce serait plutôt un risque).

PS toHaveAttribute est de jest-dom

1
skyboyer