Question

我正在使用笑话，并尝试测试异步登录请求。我能够检查呼叫是否已解决并成功。我还想测试呼叫未成功的情况。

我一直在关注docs from here。

我了解我没有正确地执行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()

编辑： ：在触发登录事件之前，应确保使用模拟数据填充表单

嘲笑api调用和检查错误的开玩笑问题

1 个答案: