如何在 Jest 中使用 axios 模拟 API 调用？

Question

我是测试新手，对使用 ES6 类模拟 API 和 axios 实例有一些疑问。

我有一个index.js：

import axios from 'axios';

export default class Pushkin {
  constructor() {
    this.con = undefined;
  }

  connect(quizAPIUrl) {
    this.con = axios.create({
      baseURL: quizAPIUrl,
    });
  }
  
  prepExperimentRun(userID) {
    const postData = {
      user_id: userID,
    };
    return this.con.post('/startExperiment', postData);
  }
  
  // ......
}

我尝试了几种方法来测试它：

import axios from 'axios';
import Pushkin from '../src/index';

jest.mock('axios');

const quizURL = './api/quiz';
axios.create.mockImplementation(() => Promise.resolve(quizURL));

const pushkinClient = new Pushkin();

test('connect to quiz api url', () => {
  pushkinClient.connect(quizURL);
  // Pushkin { con: Promise { './api/quiz' } }
  pushkinClient.con.then((data) => expect(data).toEqual(quizURL));
});

test('prepExp', () => {
  const postData = { data: [{ user_id: 123456 }] };
  axios.post.mockImplementation(() => Promise.resolve(postData));
  pushkinClient.prepExperimentRun(123456).then((data) => expect(data).toBe(postData));
});

当我运行第二个测试prepExp 时，它会抛出错误TypeError: this.con.post is not a function。而this.con 就是Promise { './api/quiz' }。

我应该如何模拟connect(quizAPIurl) 中的quizAPIurl 而不仅仅是硬编码？之后，模拟 axios 实例和测试 POST 请求的正确方法是什么？谢谢。

Answer 1

那是因为你没有正确地模拟你的 create() 方法

axios.create.mockImplementation(() => Promise.resolve(quizURL));

这只会返回一个不包含post() 方法的Promise<string>。所以，当然，这将是“不是一个函数”。

一种解决方案是您可以使用 post 方法模拟对象：

axios.create.mockImplementation(() => { get: () => {...} });

另一种可能更聪明但我没有测试的方法，只是返回 axois 本身。

axios.create.mockImplementation(() => axios);

...

axios.post.mockImplementation(() => Promise.resolve(postData));