React JS 使用 Mocha 和 Sinon 测试 Ajax答案

【问题标题】：React JS Testing Ajax using Mocha & SinonReact JS 使用 Mocha 和 Sinon 测试 Ajax
【发布时间】：2016-06-24 10:31:47
【问题描述】：

在一个 React 应用程序中我想测试一个 ajax 调用

点击事件由方法处理：

_search = () => {
    AppActions.search({
      url: this.props.url,
      queryValue: query
    })
  }

这会调用商店上的一个方法，该方法会进行 Ajax 调用：

onSearch (req) {
    $.get(url)
      .done((data) => {
        // set state...
      })
  }

我试图使用 Sinon 来存根 jquery ajax 调用：

describe('Search', function () {
  describe('Rendering', function () {
    beforeEach(() => {
      sinon.stub($, 'ajax')
      let component = TestUtils.renderIntoDocument(<MockComponent />)
      this.renderedDOM = ReactDOM.findDOMNode(component)
    })

    afterEach(() => {
      $.ajax.restore()
    })

    it('Should make an ajax request', () => {
      TestUtils.Simulate.click(myButton)
      // expect stubbed ajax call to have been made with args etc
    })
  })
})

任何人都知道我应该如何做到这一点，以便我可以：

存根 ajax 调用
调用回调或
检查存根的 ajax 调用

提前致谢

【问题讨论】：

标签： ajax testing reactjs mocha.js sinon

【解决方案1】：

我认为你应该使用 sinon 的 fakeServer api。

例如：

const server = sinon.fakeServer.create();
server.respondWith("GET", "/rest/api/yourURL", [200, {"Content-Type": "application/json"}, '{"response": "whatever"}']);

// TODO: test code

server.respond();
server.restore();

它可以存根 ajax 调用并调用回调

【讨论】：