如何在Jest中测试公理？

javascript reactjs react-redux jestjs axios

2022-08-30 04:34:10

我在 React 中有这个操作：

export function fetchPosts() {
    const request = axios.get(`${WORDPRESS_URL}`);
    return {
        type: FETCH_POSTS,
        payload: request
    }
}

在这种情况下，如何测试 Axios？

Jest在他们的网站上有这个用例，用于异步代码，他们使用模拟函数，但我可以用Axios做到这一点吗？

参考：异步示例

到目前为止，我已经这样做了，以测试它是否返回了正确的类型：

it('should dispatch actions with the correct type', () => {
    store.dispatch(fetchPosts());
    let action = store.getActions();
    expect(action[0].type).toBe(FETCH_POSTS);
});

如何传入模拟数据并测试其返回？

答案 1

不使用任何其他库：

import * as axios from "axios";

// Mock out all top level functions, such as get, put, delete and post:
jest.mock("axios");

// ...

test("good response", () => {
  axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));
  // ...
});

test("bad response", () => {
  axios.get.mockImplementation(() => Promise.reject({ ... }));
  // ...
});

可以指定响应代码：

axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: {...} }));

可以根据参数更改模拟：

axios.get.mockImplementation((url) => {
    if (url === 'www.example.com') {
        return Promise.resolve({ data: {...} });
    } else {
        //...
    }
});

Jest v23引入了一些语法糖来嘲笑承诺：

axios.get.mockImplementation(() => Promise.resolve({ data: {...} }));

它可以简化为

axios.get.mockResolvedValue({ data: {...} });

对于被拒绝的承诺，还有一个等价物：。mockRejectedValue

延伸阅读：

开玩笑的嘲笑文档
GitHub 讨论，用于解释该行的范围。jest.mock("axios")
一个相关问题，解决了将上述技术应用于Axios请求拦截器的问题。
使用像 TypeScript 中这样的 jest 函数：Typescript 和 Jest：避免模拟函数上的类型错误mockImplementation

答案 2

我使用了 axios-mock-adapter。在本例中，该服务在 ./chatbot 中进行了描述。在模拟适配器中，指定在使用 API 端点时要返回的内容。

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import chatbot from './chatbot';

describe('Chatbot', () => {
    it('returns data when sendMessage is called', done => {
        var mock = new MockAdapter(axios);
        const data = { response: true };
        mock.onGet('https://us-central1-hutoma-backend.cloudfunctions.net/chat').reply(200, data);

        chatbot.sendMessage(0, 'any').then(response => {
            expect(response).toEqual(data);
            done();
        });
    });
});

你可以在这里看到整个例子：

服务：https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.js

测试：https://github.com/lnolazco/hutoma-test/blob/master/src/services/chatbot.test.js