Comment tester un composant réactif dépendant de l'USContext Hook?

Question

J'ai un composant qui utilise useContext et ensuite sa sortie dépend de la valeur dans le contexte. Un exemple simple:

import React, { useContext } from 'react';

const MyComponent = () => {
  const name = useContext(NameContext);

  return <div>{name}</div>;
};

Lors du test de ce composant avec le rendu peu profond des instantanés de réaction et de plaisanterie. Comment puis-je modifier la valeur de NameContext?

Answer 1

Ce que j'ai fait est le test si useContext a été utilisé. Dans mon cas, useContext renvoie la fonction appelée dispatch.

Dans le composant que j'ai:

const dispatch = useContext(...);

et puis à l'intérieur onChange Méthode:

dispatch({ type: 'edit', payload: { value: e.target.value, name: e.target.name } });

---

SO Test à l'intérieur au début :

  const dispatch = jest.fn();
  React.useContext = (() => dispatch) as <T>(context: React.Context<T>) => T;

puis:

  it('calls function when change address input', () => {
   const input = component.find('[name="address"]');
   input.simulate('change', { target: { value: '123', name: 'address' } });

   expect(dispatch).toHaveBeenCalledTimes(1);
  });