代码之家  ›  专栏  ›  技术社区  ›  peter flanagan

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

  •  -1
  • peter flanagan  · 技术社区  · 6 年前

    我正在使用jest并尝试测试异步登录请求。我可以检查呼叫是否已解决并成功。我还想测试一下呼叫失败的情况。

    我一直在跟踪 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);
        });
    });
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Abkreno    6 年前

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

    编辑: 在启动登录事件之前,应确保表单中填充了模拟数据。