使用Sinon，Mocha，Enzyme和React模拟窗口

Question

我正在尝试为我正在使用的组件模拟窗口对象，仅使用上述四个库。

我知道可以使用JSDom来完成，但客户反对使用它。根据我的研究，简单地执行sinon.stub（window,'location'）即可工作，但当我运行测试时，我仍然在我的组件中得到未定义的Window。

目前，在渲染中调用了该组件返回{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();


        })


    });

});

- DimlyAware

---

我假设你已经先声明了window（作为空对象或其他什么）。此外，它是否在任何地方都可用（即是全局的）？编辑：嗯，算了吧，window.location本来就不是一个函数，而Sinon只能存根函数。不过，你到底想测试什么？为什么不只声明一个全局的window = { location : { host : "..." } }呢？ - robertklep

是的，窗口被首先声明，但它仍然提示未定义窗口。 - DimlyAware

尝试使用 global.window = { location : ... } 替代。 - robertklep

谢谢 - 看起来它运行成功了。 - DimlyAware

Answer 1

Sinon的stubs/spies/mocks只能用于函数。在这种情况下，你想mock一个全局（嵌套）变量，而Sinon并不是正确的工具。

相反，就像在浏览器中一样，你可以创建一个全局对象，模拟恰好与你的组件一起工作所需的window数量，这很容易，因为它只访问window.location.host。

因此，在实例化组件之前，请声明以下内容:

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

- robertklep

---

收到警告信息：[ts] 找不到名称 'global'，请问我能为您提供帮助吗？ - Mangesh Daundkar