web-dev-qa-db-ja.com

シノン、モカ、酵素、およびReact

上記の4つのライブラリだけで使用しているコンポーネントのウィンドウオブジェクトをモックアウトしようとしています。

JSDomでできることはわかっていますが、クライアントはそれを使用することに反対しています。私の研究によれば、sinon.stub（window、 'location'）を実行するだけで機能するはずですが、テストを実行すると、コンポーネントでWindowが未定義になります。

現在、コンポーネントはrender return {window.location.Host}内で呼び出されています

私が罪を犯してその断片を突き止めるために私が間違っていることに対する考え。その部分をスタブしたら、ウィンドウとは関係のないコンポーネントの他の部分のテストに集中できます。

私のテスト方法：

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();


        })


    });

});
unit-testingreactjsmochasinon
13
DimlyAware

Sinonスタブ/スパイ/モックは、関数でのみ機能します。この場合、グローバル（ネストされた）変数をモックしようとしています。そのためには、Sinonは適切なツールではありません。

代わりに、ブラウザのように、適切な量のwindowを模倣してコンポーネントを操作するグローバルオブジェクトを作成できます。これは、window.location.Host。

そのため、コンポーネントをインスタンス化する前に、次を宣言します。

global.window = { location : { Host : 'example.com' } };
29
robertklep