Jest Unit test case for React functional component Api call

Question

I am new to Jest Unit testing. I need to write a test case for a React functional Component. Below is the code snippet for API call

  useEffect(() => {
    getInitialData(props.id, props.baseUrl).then((response: any) => {
      setInitialResponse(response.initialResponse);
      if (props.initialData) props.initialData(response.initialResponse);
      setLoader(false);
    });
  }, []);

I don't know how to cover these lines in the jest test case. Passing id and baseUrl to this component, not covering lines after 'then'. I don't know How can I mock this also as it is present inside useEffect.

please read this stackoverflow.com/help/how-to-ask. Share the snippet you have tried so far. — Subrato Pattanaik
– Subrato Pattanaik, Commented Jan 29, 2022 at 18:20

Khushbu Patel · Accepted Answer · 2022-02-04 04:18:06Z

2

This is the way I use the jest to test something after the API has finished fetching.

Create Mock Function, (May be in other file to be used by all test cases, change it the way you want to setup)

const mockAPI = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

Define APIs

 import * as APIS from '~/api/[API_PATH]';

  const mockGetInitialData = (params = {}) =>
    jest
      .spyOn(APIS, 'getInitialData')
      .mockImplementation(() => mockAPI(params));

Test case

it('Initial Data loading Failed', async () => {
    mockGetInitialData({
      error: { errors: {name: 'Invalid Name' } }
    });
});

answered Feb 4, 2022 at 4:18

Khushbu Patel

3292 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

diedu · Accepted Answer · 2022-02-02 04:08:22Z

0

Assuming you import the getInitialData function from somewhere, a mock for that would look like this

  jest.mock("./getInitialData", () =>
    jest.fn().mockResolvedValue(initialResponseMock)
  );
  // rest of your test in here

The concept you are missing is that you need to use mockResolvedValue when mocking async code.

https://blog.jimmydc.com/mock-asynchronous-functions-with-jest/

answered Feb 2, 2022 at 4:08

diedu

20.9k4 gold badges40 silver badges53 bronze badges

Collectives™ on Stack Overflow

Jest Unit test case for React functional component Api call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related