#StackBounty: #javascript #jestjs #axios How do I get response data out of the axios mock file and into the test?

Bounty: 100

I’m having trouble with the placement of my response data for an axios mock. If I include the data in the mock file, the test passes. If I include it in the test with axiosMock.get.mockResolvedValue(); it doesn’t. I don’t want the response in the mock file because that file needs to work with all axios tests.

If I include my response in the axios mock file like this, things work as expected.

// __mocks__/axios.js
export default {
  create: jest.fn(() => ({
    get: jest.fn().mockResolvedValue({
      data: {
        data: [
          {
            label: 'Started',
            value: 'started',
            type: 'Milestone',
          },
          {
            label: 'Detected',
            value: 'detected',
            type: 'Milestone',
          },
          {
            label: 'Acknowledged',
            value: 'acknowledged',
            type: 'Milestone',
          },
        ],
      },
    }),
    interceptors: {
      request: { use: jest.fn(), eject: jest.fn() },
      response: { use: jest.fn(), eject: jest.fn() },
    },
  })),
  get: jest.fn(),
};

My test file:

// Condition.spec.js
test('fetches and displays data', async () => {
  axiosMock.get.mockResolvedValue();

  const { container } = render(
    <Condition {...props} />
  );
  await wait(() => expect(container.textContent).toContain('Current milestone is Acknowledged'));
  expect(container).toBeDefined();
});

If I remove it from the mock file and place it in the test, it fails:

// __mocks__/axios.js
export default {
  create: jest.fn(() => ({
    get: jest.fn().mockResolvedValue(),
    interceptors: {
      request: { use: jest.fn(), eject: jest.fn() },
      response: { use: jest.fn(), eject: jest.fn() },
    },
  })),
  get: jest.fn(),
};
// Condition.spec.js
test('fetches and displays data', async () => {
  axiosMock.get.mockResolvedValue({
    data: {
      data: [
        {
          label: 'Started',
          value: 'started',
          type: 'Milestone',
        },
        {
          label: 'Detected',
          value: 'detected',
          type: 'Milestone',
        },
        {
          label: 'Acknowledged',
          value: 'acknowledged',
          type: 'Milestone',
        },
      ],
    },
  });

  const { container } = render(
    <Condition {...props} />
  );
  await wait(() => expect(container.textContent).toContain('Current milestone is Acknowledged'));
  expect(container).toBeDefined();
});

How do I get my response data out of the mock file and into the test itself?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.