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

Question

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

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

我在使用 Jest 模拟<Localize/>遇到了一些麻烦。

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

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}</>)
}));

Answer 2

我们可以模拟 3rd 方库，例如在我的情况下，我需要模拟react-lazyload

组件.tsx

import LazyLoad from 'react-lazyload';

render() {
  <LazyLoad><img/></LazyLoad>
}

在 jest.config.js 中

module.exports = {
  moduleNameMapper: {
   'react-lazyload': '/jest/__mocks__/react-lazyload.js',
  }
}

在开玩笑/嘲笑/react-lazyload.js

import * as React from 'react';

jest.genMockFromModule('react-lazyload');

const LazyLoad = ({children}) => <>{children}</>;

module.exports = { default: LazyLoad };