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

时间:2020-03-11 16:09:22

标签: javascript jestjs axios

我是测试新手,我对使用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.conPromise { './api/quiz' }

如何在quizAPIurl中模拟connect(quizAPIurl)而不是仅仅对其进行硬编码?之后,模拟axios实例和测试POST请求的正确方法是什么?谢谢。

1 个答案:

答案 0 :(得分:1)

那是因为您没有正确模拟create()方法

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

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

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

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

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

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

...

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