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

Question

TLDR; 如何适当地模拟导入自第三方库的 React 组件？

我正在测试一个组件，名为 <App/>，它使用了一个叫做 <Localize/> 的第三方组件，该组件由名为 localize-toolkit 的库提供。

我在使用 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();
  }
)

这个会过去的，不过这是返回的警告信息。

函数作为React子组件无效。如果你从渲染中返回一个组件而不是<Component />，就可能会发生这种情况。

当我查看快照时，在本地化标题应该出现的位置，我得到一系列的连续点号 "..."。

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

- Cog

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

- Cog

Answer 2

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

Component.tsx

import LazyLoad from 'react-lazyload';

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

在 jest.config.js 文件中

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

在jest/模拟/react-lazyload.js中

import * as React from 'react';

jest.genMockFromModule('react-lazyload');

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

module.exports = { default: LazyLoad };

- smsivaprakaash