如何使用jest和react测试库测试axios api

Question

这是我的apis.js，我的axios逻辑是在这里编写的

import axios from 'axios'
function logSuccess(req, res, next) {
console.log(req, res)
next(res)
}
function logError(req, res, e, next) {
console.log(req, res, e)
next(e)
}
function getResource(url, onComplete) {
let _onSuccess = (res) => logSuccess(url, res, onComplete)
let _onError = (res, e) => logError(url, res, e, onComplete)
let _onException = (e) => logError(url, null, e, onComplete)
axios
.get(url)
.then((res) => {
res ? _onSuccess(res) : _onError(res)
}, _onException)
.catch(_onException)
}
function postResource(url, data, cancelTokenSource, onComplete) {
let _onSuccess = (res) => logSuccess(url, res, onComplete)
let _onError = (res, e) => logError(url, res, e, onComplete)
let _onException = (e) => logError(url, null, e, onComplete)
axios
.post(url, data, { cancelToken: cancelTokenSource.token })
.then((res) => {
res ? _onSuccess(res) : _onError(res)
}, _onException)
.catch(_onException)
}
const apis = {
getResource,
postResource,
}
export default apis

这是我调用axios函数的另一个文件：

import apis from '../../commonUtils/apis/apis'
export default class LookingGlassAPIs {
constructor(params) {
let { apiRoot } = params
this.routers = {}
this.commandRequests = {}
this.routers.getAll = (...rest) =>
apis.getResource(apiRoot + 'routers', ...rest)
this.commandRequests.post = (...rest) =>
apis.postResource(apiRoot + 'commandRequests', ...rest)
}
}
const apiRoot = 'http://127.0.0.1:8080/'

我是新手，我不知道在不点击api.can的情况下为axios编写测试用例。请帮助我。url在另一个文件中定义，但仅供参考，我在这里只做了标记。我应该使用axios.get.mockResolvedValue(数据)吗？？？这是正确的方式吗？？

Answer 1

您必须模拟axios，并查看是否使用正确的参数调用了axios方法。

apis.spec.js

import apis from './apis';
jest.mock('axios'); // This overwrites axios methods with jest Mock
import axios from 'axios';
describe('Test Apis', () => {
describe('getResource', () => {
describe('with success', () => {
const url = 'http://test-url.com';
const onComplete = jest.fn();
const data = {};
beforeEach(() => {
axios.get.mockResolvedValue(data);
});
it('should call axios get with given url', () => {
getResource(url, onComplete);
expect(axios.get).toBeCalledWith(url);
});
it('should call onComplete callback with response', async () => { // do not forget 'async'
await getResource(url, onComplete); // notice the 'await' because onComplete callback is called in '.then'
expect(onComplete).toBeCalledWith(data);
});
});
});
});

您可以对错误响应和POST方法执行同样的操作。您也可以通过模拟apis.js方法来测试LookingGlassAPIs，或者再次通过模拟axios来测试，这取决于您的"；单位"；项目中的定义。

Answer 2

只要你想测试的函数没有返回任何东西，你就可以测试它们是否抛出。

你需要监视你的axios方法，嘲笑返回值(在这种情况下是Promise)，比如：

import axios from 'axios';

beforeAll(() => {
axios.get.mockImplementation(() => Promise.resolve('whatever-get'));
axios.post.mockImplementation(() => Promise.resolve('whatever-post'));
});

afterAll(() => {
jest.clearAllMocks();
});

test('get does not throw', () => {
expect(getResource()).not.toThrow();
});

test('post does not throw', () => {
expect(postResource()).not.toThrow();
});