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

问题描述

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

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/'

我是新手，我不知道要为 axios 编写测试用例而不点击 api。任何人都可以帮助我。url 在另一个文件中定义，但仅供参考，我只在此处标明。我应该使用 axios.get.mockResolvedValue(data)???是正确的方式吗？

标签： reactjsjestjsreact-testing-library

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

api.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 方法执行相同的操作。您还可以通过模拟您的方法来测试您LookingGlassAPIs的apis.js方法，或者再次通过模拟来测试您的方法axios，这取决于您项目中的“单元”定义。

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

问题描述

解决方案

推荐阅读