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' } };

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

1 个答案: