reactjs - 如何测试其中包含 api 请求的 React 函数？

Question

我在 React 组件中有一个类似的功能。如何测试成功的请求和不成功的请求？

deleteQuestion(id) {
  axios.delete('/api/questions/' + id)
    .then(response => {
      this.setState({message: "Deletion Successful!"});
    }).catch(error => {
      var errorMessage = 'Question not deleted: ' + error.response.data.message;
      this.setState({error: errorMessage});
    });
}

我正在考虑为测试做这样的事情，但这显然行不通。基本上final函数里面的console.log和assertion是跑不起来的。

import React from 'react';
import { mount, shallow } from 'enzyme';
import axios from 'axios';
import axios from 'axios';
import QuestionList from './QuestionList';
import sinon from 'sinon';


beforeEach(function () {
  // import and pass your custom axios instance to this method
  moxios.install()
})

afterEach(function () {
  // import and pass your custom axios instance to this method
  moxios.uninstall()
})

it('should modals and <table>', () => {
  const wrapper = shallow(<QuestionList/>);
  wrapper.instance().deleteQuestion()
  moxios.wait(function () {
      let request = moxios.requests.mostRecent()
      request.respondWith({
        status: 200,
        response: [
          { id: 1, question: 'Fred', answer: 'Flintstone' },
          { id: 2, question: 'Wilma', answer: 'Flintstone' }
        ]
      }).then(function () {
        console.log('hello')
        expect(wrapper.state().message).to.equal('Deletion Successful');
        done()
      })
    })
});

Answer 1

您可以使用一些模拟 http 服务器库。例如https://www.npmjs.com/package/mock-http-server