如何使用 Jest 模拟第三方 React 组件？

Question

太长了；模拟从第三方库导入的 React 组件的正确方法是什么？

我正在测试一个名为 的组件<App/>。<Localize/>它使用由名为 的库提供的第三部分组件localize-toolkit。

我<Localize/>在使用 Jest 进行嘲笑时遇到了一些麻烦。

这是我尝试嘲笑它的方法。

jest.mock('localize-toolkit', () => ({
  // Normally you pass in a key that represents the translated caption.
  // For the sake of testing, I just want to return the key.
  Localize: () => (key:string) => (<span>{key}</span>)
}));

我已经编写了一个单元测试，<App/>如下所示。

it('Test', () => {
    const component = render(<App/>);
    expect(component).toMatchSnapshot();
  }
)

它会通过，但是这是返回的警告消息。

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

当我查看快照时，我会看到一系列句点“...”，其中应出现本地化标题。

我没有Localize正确模拟该组件吗？

Answer 1

这就是我最终的做法。

请注意第三方组件如何Localize需要作为函数返回。

jest.mock('localize-toolkit', () => ({
  Localize: ({t}) => (<>{t}</>)
}));

如果有多个组件，而您只想模拟其中一个组件，则可以这样做：

jest.mock("localize-toolkit", () => {
    const lib = jest.requireActual("localize-toolkit");

    return {
        ...lib,
        Localize: ({t}) => (<>{t}</>), 
    };
});