reactjs - 如何动态模拟组件？

Question

我在测试库中使用 jest。

我必须模拟我要测试的组件的每个子组件，就像这样工作正常:

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

但是因为我不想在整个应用程序中复制粘贴模拟指令，所以我编写了一个函数来模拟任何组件:

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

运行测试时，我得到这个错误:

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

谁能拯救这一天？

Answer 1

您需要在变量中为模拟组件添加前缀“mock”。这是针对未初始化的 mock 变量的预防措施，允许以 mock 为前缀的变量名。