用Sinon,Mocha,Enzyme和React嘲弄窗口

Question

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

我知道可以使用JSDom完成,但客户端反对使用它.基于我的研究,简单地做sinon.stub(窗口,'位置')应该工作但是当我运行我的测试时,我仍然在我的组件中未定义Window.

目前,在render return {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();


        })


    });

});

Answer 1

Sinon存根/间谍/模拟仅适用于函数.在这种情况下,您正在尝试模拟全局(嵌套)变量,而Sinon不是正确的工具.

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

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

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