javascript - react 测试假 XMLHttpRequest

Question

我正在为某人的应用程序编写一些测试代码。我是专门为 React 编写测试的新手。

在组件内部的一个方法中，一个新的 XMLHttpRequest 对象被实例化，然后像这样使用:

var myModal = React.createClass({
  postRequest: function(data) {
    var json = JSON.stringify(data)
    var request = new XMLHttpRequest()

    request.open('POST', '/my/endpoint', true)
    request.setRequestHeader('Content-Type', 'application/json')
    request.send(json)
  }

  //...
}

我正在使用 Sinon ，并且他们的文档说有一个 Fake XMLHttpRequest 可用于测试 AJAX 请求。我试图了解如何用 Sinon 对象覆盖这个 newly 实例化对象，以便测试使用它进行 api 调用。

如果我尝试将假对象分配给 request 变量:

before(function () {
    request = sinon.useFakeXMLHttpRequest();
    requests = [];
    request.onCreate = function (req) { requests.push(req); };
});

当测试到达组件的 new XMLHttpRequest() 行时，测试仍然失败。我应该像这里那样创建和导入 stub 对象吗？ https://github.com/danvk/mocha-react/blob/jsx-stubs/BigComplicatedComponent.js还是我错误地试图覆盖它。

Answer 1

终于搞定了。将此添加到顶部。我想它应该可以覆盖任何类。

var FakeXMLHTTPRequests = require('fakexmlhttprequest')
var requests   = []

XMLHttpRequest = function() {
    var r =  new FakeXMLHTTPRequests(arguments)
    requests.push(r)
    return r
}

感谢这篇文章帮助我思考这个问题。 http://www.asbjornenge.com/wwc/testing_react_components.html

如果使用 XMLHttpRequest 也可以这样做:correct usage of sinon's fake XMLHttpRequest