web-dev-qa-db-fra.com

Test d'un composant qui utilise useEffect en utilisant une enzyme peu profonde et non montée

// MyComponent.jsx
const MyComponent = (props) => {
  const { fetchSomeData } = props;

  useEffect(()=> {
    fetchSomeData();
  }, []);

  return (
    // Some other components here
  )
};

// MyComponent.react.test.jsx
...
describe('MyComponent', () => {
  test('useEffect', () => {
    const props = {
      fetchSomeData: jest.fn(),
    };

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

    // THIS DOES NOT WORK, HOW CAN I FIX IT?
    expect(props.fetchSomeData).toHaveBeenCalled();
  });
});

Lors de l'exécution des tests, j'obtiens:

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

L'attente échoue car shallow n'appelle pas useEffect. Je ne peux pas utiliser mount en raison d'autres problèmes, je dois trouver un moyen de le faire fonctionner en utilisant shallow.

reactjsenzyme
6
Adolfo

Voici une solution d'un de mes collègues de CarbonFive: https://blog.carbonfive.com/2019/08/05/shallow-testing-hooks-with-enzyme/

TL; DR: jest.spyOn(React, 'useEffect').mockImplementation(f => f())

1
Lenny T