Question

在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电话

提前致谢

Answer 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调用并调用回调

使用Mocha＆amp; amp; React JS测试Ajax兴农

1 个答案: