是否可以将每个单独的测试包装在包装器组件中？

Question

我在我的 React 组件中使用了 Material-UI 组件。因此，我需要在测试中的所有组件周围应用 <MuiThemeProvider></MuiThemeProvider> 组件。

我的组件位于单独的文件夹中：

./src/components/Header/Header.tsx
./src/components/Header/Header.test.ts
./src/components/Header/...
./src/components/Footer/Footer.tsx
./src/components/Footer/Footer.test.ts
./src/components/Footer/...
// etc.

测试必须如下所示：

import React from 'react';
import { render } from '@testing-library/react';
import Header from './Header';

it('matches snapshot', () => {
  const container = render(
    // This theme provider is necessary since my components depend on it.
    // But rather don't want to include this in all my components. 
    <MuiThemeProvider theme={theme}>
      <Header />
    </MuiThemeProvider>
  );
  expect(container).toMatchSnapshot();
});

但现在我必须在每个测试中定义 MuiThemeProvider。

我的所有测试都可以这样做一次吗？

Answer 1

找到它：https://testing-library.com/docs/react-testing-library/setup

原来这是一个反应测试库的东西。

您可以修改渲染函数以在渲染方法中包装一个组件（提供者）。

只需更改渲染函数的导入：

创建包含“包装器”组件的函数：

// test-utils.js
import { render } from '@testing-library/react'
import { ThemeProvider } from 'my-ui-lib'
import { TranslationProvider } from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme="light"> // here it is
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  )
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react'

// override render method
export { customRender as render }

然后像这样开始使用它：

// my-component.test.js
- import { render, fireEvent } from '@testing-library/react';
+ import { render, fireEvent } from '../test-utils';

Answer 2

您可以使用jest.mock 模拟您的高阶组件。

它可以像下面这样

jest.mock("hoc-module", () => {
    return {
        hocFunction: function(hocConf) {
            return function(component) {
                component.defaultProps = {
                    ...component.defaultProps,
                    mockPropKey: mockPropValue
                };
                return component;
            };
          }
    };
});

P.S：上面的代码是我自己写的。