Change/overwrite mock data with react-testing-library and jest

Question

I'm writing a test mocking data retrieved from an API call useSelectUserTasksByType:

import * as React from 'react';
import { render, cleanup } from '@testing-library/react';

import Category from 'pages/Category';
import { TestWrapper } from './utils';

afterEach(cleanup);

const tasks = {
  COMPLETED: [
    {
      'taskId': '8534dbfa-2e7c-4229-b1e5-71846af89270',
      'title': 'Risico profiel',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
      'type': 'QUESTIONNAIRE',
      'category': 'RISKS',
      'status': 'COMPLETED',
    },
  ],
  OPEN: [
    {
      'taskId': '1cdcf73d-fb2b-456b-9cc9-62a0ea9585ac',
      'title': 'Juridische risico\'s meteen afdekken',
      'description': 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
      'type': 'CONTENT_PAGE',
      'category': 'RISKS',
      'status': 'OPEN',
    },
  ],
};

jest.mock('queries/tasks/selectors', () => ({
  useSelectUserTasksByType: () => ({ ...tasks }),
}));

test('<Category /> render', async () => {
  const {
    findByTestId,
    findByText,
  } = render(<Category />, { wrapper: TestWrapper });

  expect(await findByTestId('categoryHeading').textContent).toBe(category.name);

  const firstOpenEl = await findByText(tasks.OPEN[0].title);
  expect(await findByTestId('tasksList_OPEN')).toContainElement(firstOpenEl);

  const firstCompletedEl = await findByText(tasks.COMPLETED[0].title);
  expect(await findByTestId('tasksList_COMPLETED')).toContainElement(firstCompletedEl);
});

My component has two lists. Each rendering the related components, so OPEN tasks are in the open list and the same goes for COMPLETED. Now this first test is working as expected :)

But for a second test I want to test the functionality of doing a task and moving it from the OPEN to the COMPLETED array.

I guess I have to overwrite the response from useSelectUserTasksByType inside jest.mock('queries/tasks/selectors'), but I don't know how to achieve this.

test('<Category /> complete task', async () => {
  const {
    findByTestId,
    findByText,
  } = render(<Category />, { wrapper: TestWrapper });

  // .... Move item from OPEN array to COMPLETED array  within tasks object
});

Anyone who can lead me in the right direction?

Change/overwrite mock data with react-testing-library and jest

0 Answers0