在测试中模拟子react组件失败

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需要了解mocked组件。

你引用的那篇文章，有这个信息，

​

​

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