Javascript 模拟api调用和检查错误的Jest问题

我正在使用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);
    });
});

从“React”导入React；
从“反应测试库”导入{render，firevent}；
从“./index”导入登录名；
从“/api”导入{login as mockLogin}；
让mockData={
令牌：“12345”
};
让errorData={
消息：“您的用户名/密码不正确”
};
jest.mock（'.utils/api'，（）=>{
返回{
jsonRequest:jest.fn（（）=>新承诺（（解决，拒绝）=>{
解析（mockData，）；
//我做得不对。
拒绝（错误数据）；
})),
};
});
描述（“”，（）=>{
它（'如果成功则返回sessionId，如果不成功则返回error'，（）=>{
常量{getByLabelText，getByText}=render（）；
const login按钮=getByText（/login/i）；
fireEvent.单击（登录按钮）；
expect（mockLogin）.toBeCalledTimes（1）；
expect（mockLogin）.toHaveBeenCalledWith（'/login'{
数据：{
密码：“测试”，
用户名：“测试”，
},
方法：“POST”，
});
expect（mockLogin（））.resolves.toBe（mockData）；
expect（mockLogin（））。拒绝（mockData）；
});
});

这里需要测试的是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();

})),

---

编辑：在启动登录事件之前，您应该确保表单中填充了模拟数据

SO land是否有人知道如何执行此操作：-dh您的

mockLogin

是如何调用的？抱歉，更新了问题，当

fireEvent.单击（loginButton）时会调用它

@Abkreno这有帮助吗？是的，但是在启动登录事件之前，您应该确保表单中填充了模拟数据，然后您应该测试我在下面的回答中提到的场景。很好！这很有意义。我确实收集了所有这些数据，但只是将其排除在问题之外。好吧，很好，但是您直到需要在模拟API函数中以某种方式拒绝请求，因此对登录组件传递的参数进行检查是有意义的

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