Comment puis-je simuler des composants de manière dynamique ?

Question

J'utilise jest avec testing-library.

Je dois simuler chaque composant enfant du composant que je veux tester, comme ceci qui fonctionne bien :

jest.mock('react-router-dom', () => ({
  NavLink: (props: any) => {
    const NavLinkMock = 'NavLink-Mock';
    // @ts-ignore
    return <NavLinkMock {...props} />;
  },
}));

Mais comme je ne veux pas copier-coller les instructions de mocking partout dans l'application, j'ai écrit une fonction pour mocker n'importe quel composant :

export function mockComponent(source: string, name: string) {
  jest.mock(source, () => ({
    [name]: (props: any) => {
      const ComponentMock = `${name}-mock`;
      // @ts-ignore
      return <ComponentMock {...props} />;
    },
  }));
}

Lors de l'exécution du test, j'obtiens cette erreur :

> The module factory of `jest.mock()` is not allowed to reference any
> out-of-scope variables.
>     Invalid variable access: name

Quelqu'un peut-il sauver la journée ?

Answer 1

Vous devez préfixer le composant simulé dans une variable avec "mock". C'est une précaution contre les variables mock non initialisées, les noms de variables préfixés par mock sont autorisés.