未能在测试中模拟子反应组件

Question

有很多关于这个的文章和例子，但由于某种原因，似乎没有任何效果。

我有一个包含子组件的 React 组件。而且，为了简单起见，我想在测试中模拟子组件。

组件如下所示：

...
import { ProjectTeam } from '../../assignment/project-team/component';

export const ProjectOverview: React.FC<ProjectOverviewProps> = ({ projectId }) => {
  ...

  return (
    <>
      ...
        <Box flex={1}>
          <ProjectTeam projectId={projectId} />
        </Box>
        ...
    </>
  );
};

ProjectTeam 组件：

export const ProjectTeam: React.FC<ProjectTeamProps> = ({ projectId }) => {
  // just a standard component... 
};

这是测试：

import React from 'react';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { render } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import { generateProject } from '../../testing/generators/project';
import { ProjectOverview } from './component';
import { NGStateProvider } from '../../react/providers/route-provider/component';
import { testAngularRouter } from '../../testing/testAngularRouter';
import { DefaultProjectCollection, DefaultUtilizationCollection } from '../store/model';
import { DefaultApaActionCollection } from '../../apa/model';
import i18n from '../../testing/i18n';
import thunk from 'redux-thunk';

describe('ProjectOverview', () => {
  let mockStore = null;
  const project = generateProject();

  beforeEach(() => {
    jest.mock('../../assignment/project-team/component', () => ({ ProjectTeam: 'ProjectTeam' }));

    mockStore = configureMockStore([thunk])({
      projects: { DefaultProjectCollection, ...{ entities: { [project.id]: project } } },
      toolUtilizations: DefaultUtilizationCollection,
      apaActions: DefaultApaActionCollection,
    });
  });

  test('renders correctly', () => {
    const { asFragment } = render(
      <NGStateProvider router={testAngularRouter}>
        <Provider store={mockStore}>
          <I18nextProvider i18n={i18n}>
            <ProjectOverview projectId={project.id} />
          </I18nextProvider>
        </Provider>
      </NGStateProvider>,
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

我的假设是 jest.mock(...) 应该简单地替换测试模式下的子组件。然而，事实并非如此。整个组件正在尝试按原样呈现。

这是我参考的其中一篇文章：https://thoughtbot.com/blog/mocking-react-components-with-jest

Answer 1

尝试将 jest.mock 电话移到外面。我会说就在顶部，就在 describe 部分之前和之外。

Jest 在开始执行相关测试文件之前需要了解模拟组件。

您引用的文章有此信息，

或者，如果您愿意，可以将其放在组件旁边的 __mocks__ 文件夹中。

未能在测试中模拟子反应组件

Failing to mock child react component in tests

unit-testing

reactjs

jestjs

react-testing-library