用 Sinon、Mocha、Enzyme 和 React 模拟 Window

Question

我正在尝试模拟一个组件的 window 对象，我只使用上面列出的四个库。

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

目前在渲染中调用组件 return {window.location.host}

有什么想法让 sinon 删掉那篇文章是我做错了什么。一旦我删除了那部分，我就可以专注于测试该组件的其他部分，这些部分与 window.

无关

我的测试方法：

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 stubs/spies/mocks 只能使用函数。在这种情况下，您正在尝试模拟全局（嵌套）变量，而 Sinon 不是合适的工具。

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

因此在实例化组件之前，声明如下：

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

用 Sinon、Mocha、Enzyme 和 React 模拟 Window

Mocking Window with Sinon, Mocha, Enzyme, and React

unit-testing

mocha.js

sinon

reactjs