Jest Проблема с ложным вызовом API и проверкой ошибки

Question

Я использую jest и пытаюсь проверить асинхронный запрос на вход.Я могу проверить, что вызов разрешен и успешен.Я также хотел бы проверить случай, когда звонок не был успешным.

Я следил за документами отсюда .

Я понимаю, что не правильно reject, но если я переместил jest.mock('.utils/api', () => {... в тестзаблокировать это не работает, он должен быть снаружи.Кто-нибудь может посоветовать правильный способ сделать это?

См. Мой код ниже:

import React from 'react';
import { render, fireEvent } from 'react-testing-library';
import Login from './index';
import { login as mockLogin } from './api';

let mockData = {
    token: '12345'
};

let errorData = {
   message: 'Your username/password is incorrect'
};

jest.mock('.utils/api', () => {
    return {
        jsonRequest: jest.fn(() => new Promise((resolve, reject) => {
            resolve(mockData,);
            // I am not doing this correctly.
            reject(errorData);
        })),
    };
});


describe('<Login />', () => {   

    it('returns a sessionId if successful and error if not', () => {

        const { getByLabelText, getByText } = render(<Login />);
        const loginButton = getByText(/login/i);
        fireEvent.click(loginButton);
        expect(mockLogin).toBeCalledTimes(1);
        expect(mockLogin).toHaveBeenCalledWith('/login', {
            data: {
                password: 'test',
                username: 'test',
            },
            method: 'POST',
        });

        expect(mockLogin()).resolves.toBe(mockData);
        expect(mockLogin()).rejects(mockData);
    });
});

Answer 1

Здесь вам нужно протестировать поведение вашего компонента, когда API по какой-то причине отклоняет запрос.

Предположим, что такой сценарий:

Допустим, причина отклонения заключается в том, что «Введен неверный пароль» .Затем вам нужно убедиться, что компонент Login покажет сообщение об ошибке в DOM, где пользователь сможет увидеть его, и повторно введет свой пароль

. Чтобы проверить это, необходимо выполнить проверку внутри проверенногоAPI, что-то вроде:

jsonRequest: jest.fn((formDataSubmittedFromComponent) => new Promise((resolve, reject) => {
    // Notice that the mocked function will recieve the same arguments that the real function recieves from the Login component
    // so you can check on these arguments here
   if (formDataSubmittedFromComponent.password !== mockData.password) {
     reject('Entered password is not correct') // << this is an error that your component will get and should handle it
   }
  resolve();

})),

После этого вы должны проверить, как ваш компонент обрабатывал отклонение

Например, вы можете проверить, отображал ли он сообщение об ошибке в DOM:

const errorMessageNode = getByTestId('error-message');
expect(errorMessageNode).toBeTruthy()

Редактировать: перед тем, как запустить событие входа в систему, вы должны убедиться, что форма заполнена проверенными данными