Sinon Fakeserver 测试不同的组件/文件 - 没有请求？答案

【问题标题】：Sinon Fakeserver Testing Different Component/File - No Requests?Sinon Fakeserver 测试不同的组件/文件 - 没有请求？
【发布时间】：2016-10-22 09:31:05
【问题描述】：

我正在使用 Mocha/Chai/Sinon 测试一个 React 组件，并在另一个文件中调用 AJAX 请求，使用类似 renderedComponent.getTodos(callback) 的东西。我正在传递一个类似于此 Sinon FakeServer tutorial 的回调。但是，我遇到了一个奇怪的语法错误，导致回调未被调用，因此server.requests 为空。

我知道我问了一个类似的问题here - 但是，这里不同的问题是我在不同的文件中调用 AJAX 请求，而不是在同一个文件中，现在解决方案有效之前不再工作。我不确定为什么。总的来说，我的问题是：是否在不同的文件中包含一个函数会导致 Sinon 无法加载到我的 JSDOM 实例中？

作为参考，这里是我的渲染组件初始化和 FakeServer 代码，位于我的测试文件中：

test.js

renderedComponent = ReactTestUtils.renderIntoDocument(
      <Component...>
        <p>Drag &amp; drop files here or click here to browse for files.</p>
      </Component> 


... 

describe('Testing', function(){
    var server;

    before(function () { server = sinon.fakeServer.create(); });
    after(function () { server.restore(); });

    it("calls callback with deserialized data", function () {
        var callback = sinon.spy();
        renderedComponent.getTodos(callback);

        // This is part of the FakeXMLHttpRequest API
        server.requests[0].respond(
            200,
            { "Content-Type": "application/json" },
            JSON.stringify([{ id: 1, text: "Provide examples", done: true }])
        );

        assert(callback.calledOnce);
    });

这是renderedComponent 中的serverRequest 函数，它是我正在尝试测试的不同文件中的一个 React 组件：

Component.js

var Component = React.createClass({

...

    function getTodoscallback) {
        $.ajax({
             url: "/todo/items",
             success: function (data) {
                 // Node-style CPS: callback(err, data)
                 callback(null, data);
             }
        });
    }
}

在 AJAX 请求中添加 error 参数会显示尝试执行 urlObj = new URL(uri, documentBaseURLSerialized(this._ownerDocument)); 的 jsdom 节点模块的语法错误

我的预感是，这与加载 jQuery 和 Sinon 的 JSDo 相关，但除此之外我不知道——如果能提供任何帮助，我将不胜感激。

【问题讨论】：

不清楚什么文件里有什么。事实上，您应该编辑您的问题以使其成为minimal reproducible example，以便人们可以重现您遇到的错误。所有不同部分如何相互关联的细节非常重要。
@Louis 我试图弄清楚什么是什么文件。如果还有什么我可以做的，请告诉我。

标签： jquery unit-testing reactjs mocha.js sinon

【解决方案1】：

好吧，我设法用这个设置解决了这个问题：

import jsdom from 'jsdom';
import _$ from 'jquery';

global.jsdom = jsdom.jsdom;
global.document = global.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.XMLHttpRequest = global.window.XMLHttpRequest;
global.navigator = window.navigator;

global.sinon = require('sinon');
global.sinon.useFakeXMLHttpRequest();

global.window.XMLHttpRequest = global.XMLHttpRequest;
global.$ = _$(global.window);

问题似乎是我需要将 jQuery 和 sinon 都设置为全局变量。仍然不完全确定，但感谢它的工作。

【讨论】：