CODEWITHSUNDEEP
reactjsunit-testingjestjsreact-testing-library
Alex A.
Alex A.

Reputation: 2613

Failing to mock child react component in tests

There are a bunch of articles and examples about this one, but for some reason, nothing seems to work.

I have a react component that has a child component. And, for simplicity's sake, I want to mock the child component in the test.

The component looks like this:

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

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

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

The ProjectTeam component:

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

And here is the test:

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

My assumption, that jest.mock(...) should simply replace the child component in test mode. However, it does not. The whole component is trying to render as is.

Here is one of the articles I was referring to: https://thoughtbot.com/blog/mocking-react-components-with-jest

Upvotes: 0

Views: 1478

Answers (1)

Emmanuel Ponnudurai
Emmanuel Ponnudurai

Reputation: 1084

Try moving the jest.mock call outside. I would say right at the top, just before and outside the describe section.

Jest needs to know about mocked component before it starts executing the test file in question.

The article which you reference, has this info,

enter image description here

Alternatively, you can put it within a __mocks__ folder next to the component if that is your preference.

Upvotes: 1

Related Questions