Back

Technologies:

javascriptjavascript
avatar
Tolerim
21 hours ago

What is the procedure for configuring Jest to perform API testing on Next.js?

Please assist me in writing a Jest test for the useLoginUserMutation API. The authApi file imports the createApi and fetchBaseQuery from the "@reduxjs/toolkit/query/react" package. It defines an authApi with the reducerPath, baseQuery, and endpoints, which includes the loginUser mutation. I need to mock the useLoginUserMutation by returning different responses and test its behavior in various scenarios, including successful response, error response, and isLoading status. Moreover, I want to ensure that the useLoginUserMutation hook is called with the correct payload.
Answers(1)
avatar
Tolerim
21 hours ago
Verified Answer
To write a test for the useLoginUserMutation API with Jest, you can follow these steps: 1. Create a mock for the useLoginUserMutation function using jest.mock(). 
import { useLoginUserMutation } from '../../src/services/authApi';

jest.mock('./../../src/services/authApi', () => ({
  useLoginUserMutation: jest.fn(),
}));
2. Write your test cases using the useLoginUserMutation function. 
describe('auth/v1/sign-in', () => {
  const payload = {
    email: '[email protected]',
    password: 'password123',
  };

  const mockResponse = {
    success: true,
    token: 'mock-token',
    user: {
      id: 123,
      email: '[email protected]',
      name: 'Test User',
    },
  };

  test('should return a successful response when called', async () => {
    useLoginUserMutation.mockReturnValueOnce({
      data: mockResponse,
      isLoading: false,
      error: null,
      isSuccess: true,
    });

    const response = await useLoginUserMutation(payload);

    expect(response.isSuccess).toBe(true);
    expect(response.data).toEqual(mockResponse);
  });

  test('should return an error response when there is an error', async () => {
    const mockError = {
      message: 'Error: Invalid email or password',
    };

    useLoginUserMutation.mockReturnValueOnce({
      data: null,
      isLoading: false,
      error: mockError,
      isSuccess: false,
    });

    const response = await useLoginUserMutation(payload);

    expect(response.isSuccess).toBe(false);
    expect(response.error).toEqual(mockError);
  });

  test('should return isLoading as true while the request is in progress', () => {
    useLoginUserMutation.mockReturnValueOnce({
      data: null,
      isLoading: true,
      error: null,
      isSuccess: false,
    });

    const response = useLoginUserMutation(payload);

    expect(response.isLoading).toBe(true);
  });

  test('should call the useLoginUserMutation hook with the correct payload', () => {
    useLoginUserMutation(payload);

    expect(useLoginUserMutation).toHaveBeenCalledWith(payload);
  });
});
3. Run the test using npm test. If you make any changes to the real function, the test should fail if it affects the behavior of the useLoginUserMutation function. Make sure to update the mock as needed to reflect any changes in the function. Regarding your attempt to use @testing-library/react-hooks, it might not be compatible with your version of React. You can try using a different version of the library or a different testing library such as react-testing-library. Also, considering using the jest.mock() function is a good option to test React hooks. For more information on testing React hooks with Jest, you can check out the official documentation on Jest at https://jestjs.io/docs/testing-frameworks#react-testing-library.
;