web-dev-qa-db-fra.com

Comment fonctionne le test de capture instantanée et que fait la fonction toMatchSnapshot () dans les tests de capture instantanée Jest pour les composants React?

Je suis nouveau dans les tests Jest et je passais en revue quelques exemples de la façon dont les cas de test sont écrits dans Jest pour les composants React. J'ai rencontré des tests instantanés et essayais de comprendre de quoi il s'agit réellement. Et ce que je suis tombé sur le web est "Le test de cliché est un moyen d'affirmer le résultat d'un test donné en générant une représentation Json de sa sortie." J'ai donc 2 doutes dans le test de cliché à partir de maintenant :

1) Disons que nous avons un composant simple qui a un paragraphe simple. Donc, si j'essaye de le tester en utilisant le test Snapshot, comment va-t-il le convertir en représentation JSON du composant? Et quand est-ce utile?

2) Je suis tombé sur un exemple qui ressemblait à:

    Wrapper = shallow(<First_Component />);

   it("displays the result", () => {
      const test = Wrapper.find(Second_Component).length;
      expect(test).toMatchSnapshot();
   });

Donc, ma question avec le code ci-dessus est de savoir comment fonctionne la fonction toMatchSnapshot () ici?

reactjstddjestjssnapshot
11
pranami

Snapshots vous permet de tester si votre composant s'affiche correctement donc dans votre cas

expect(Wrapper).toMatchSnapshot()

Si vous souhaitez tester le nombre d'occurrence d'un composant donné, importez votre deuxième composant et créez votre test:

it("displays the result", () => {
  const test = Wrapper.find(Second_Component).length;
  expect(test).toEqual(1); // or the number of occurrence you're expecting
});

Si vous êtes intéressé par la représentation JSON de vos composants, vous pouvez utiliser le package enzyme-to-json qui sert à cet effet

3
t3__rry

Je pense que cette question n'a pas été répondue avec suffisamment de détails! Les tests d'instantanés sont basés sur l'historique de vos tests précédents. Lorsque vous exécutez un test d'instantané pour la première fois, il crée un fichier texte comprenant le rendu textuel de votre arborescence de composants. Par exemple le test suivant:

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Générera le fichier texte suivant:

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

Vous devez conserver ces fichiers d'instantanés dans votre VCS (git). Lorsque vous apportez une modification, vous pouvez exécuter ces tests pour voir si elle correspond ou non au fichier texte de l'instantané.

pour plus de lecture, étudiez ce document: https://jestjs.io/docs/en/snapshot-testing

1
Iman Mohamadi