Comment tester un composant de réaction qui dépend du hook useContext?

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 moteur de rendu peu profond des instantanés de réaction et de plaisanterie. Comment puis-je changer la valeur de NameContext ?

Answer 1

Ou si vous testez votre composant de manière isolée sans monter les composants parents, vous pouvez simplement vous moquer de useContext:

 jest.mock('react', () => {
  const ActualReact = require.requireActual('react')
  return {
    ...ActualReact,
    useContext: () => ({ }), // what you want to return when useContext get fired goes here
  }
})

Vous pouvez toujours utiliser une valeur dynamique useContext avec un jest.fn

Answer 2

Ancien message mais si cela aide quelqu'un, c'est comme ça que je l'ai fait fonctionner

 import * as React from 'react';
import { shallow } from 'enzyme';

describe('MyComponent', () => {
  it('should useContext mock and shallow render a div tag', () => {
    jest.spyOn(React, 'useContext').mockImplementation(() => ({
      name: 'this is a mock context return value'
    }));

    const myComponent = shallow(
      <MyComponent
        props={props}
      />).dive();

    expect(myComponent).toMatchSnapShot();
  });
});

Answer 3

Pour compléter la réponse acceptée ci-dessus, pour un rendu non superficiel, j'ai légèrement modifié le code pour simplement entourer mon composant avec le contexte

 import { mount } from 'enzyme';
import NameContext from './NameContext';

test("non-shallow render", () => {
    const dummyValue = {
      name: 'abcd',
      customizeName: jest.fn(),
      ...
    }; 
    const wrapper = mount(
        <NameContext.Provider value={dummyValue}>
            <MyComponent />
        </NameContext.Provider>
    );

    // then use  
    wrapper.find('...').simulate('change', ...);
    ...
    expect(wrapper.find('...')).to...;
});