用 Sinon、Mocha、Enzyme 和 React 模拟窗口答案

【问题标题】：Mocking Window with Sinon, Mocha, Enzyme, and React用 Sinon、Mocha、Enzyme 和 React 模拟窗口
【发布时间】：2016-10-11 20:31:52
【问题描述】：

我正在尝试使用上面列出的四个库来模拟我正在使用的组件的窗口对象。

我知道它可以用 JSDom 完成，但客户反对使用它。根据我的研究，简单地做 sinon.stub(window,'location') 应该可以工作，但是当我运行测试时，我的组件中仍然出现 Window undefined。

当前组件在渲染返回 {window.location.host} 中被调用

任何想法我做错了什么让 sinon 把那一段删掉。一旦我删除了那部分，我就可以专注于测试该组件的其他与窗口无关的部分。

我的测试方法：

import React from 'react';

import { shallow } from 'enzyme';
import chai from 'chai';
chai.should();
import sinon from 'sinon';

import BillingStatementRow from '../BillingStatementRow';

describe('Test <BillingStatementRow /> Component', function() {

    context('Function Testing', function() {

        it('Test - onFieldChange - Make sure it handles NaN', function() {

            var e = {target: {value: NaN}};

            var window = { location : { host : "..." } };

            var mockedOnChange = sinon.spy();

            const wrapper = shallow (
                <BillingStatementRow slds={''} key={'1'}
                    Id={'1'} inputValue={'0'} salesInvoice={'SIN0001'}
                    invoicedAmount={1000} duedate={'1461628800000'}
                    outstandingBalance={1000} receiptRemaining={1000}
                    amountAllocated={1000} onChange={mockedOnChange.bind(this,'BS0001')} />
            );

            wrapper.instance().onFieldChange('amountAllocated', e);
            wrapper.update();


        })


    });

});

【问题讨论】：

我假设您首先声明了window（作为空对象或其他东西）？此外，它是否随处可用（即它是全球性的）？编辑：嗯没关系，window.location 无论如何都不是函数，Sinon 只能存根函数。不过，您到底想测试什么？为什么不直接声明一个全局 window = { location : { host : "..." } }？
是的，首先声明了窗口，但它仍然给我窗口未定义。
改用global.window = { location : ... }。
谢谢 - 它看起来有效。

标签： unit-testing reactjs mocha.js sinon

【解决方案1】：

Sinon 存根/间谍/模拟仅适用于函数。在这种情况下，您试图模拟一个全局（嵌套）变量，Sinon 不是正确的工具。

相反，就像在浏览器中一样，您可以创建一个全局对象来模拟适量的 window 以使用您的组件，这很容易，因为它只访问 window.location.host。

所以在实例化组件之前，声明如下：

global.window = { location : { host : 'example.com' } };

【讨论】：

收到此警告 [ts] 找不到名称“全局”。你能帮帮我吗