Szydzenie okna z Sinon, Mocha, Enzyme i React

Question

Próbuję wyszydzić obiekt okna dla składnika, którego używam z tylko czterech bibliotek wymienionych powyżej.

Wiem, że można to zrobić za pomocą JSDom, ale klient jest przeciwny używaniu go. Na podstawie moich badań, po prostu wykonanie sinon.stub (okno, "lokalizacja") powinno zadziałać, ale kiedy przeprowadzę swoje testy, nadal otrzymuję niezdefiniowane okno w moim komponencie.

Obecnie składnik nazywa się wewnątrz tynku zamian {window.location.host}

żadnych myśli, co robię źle, aby uzyskać sinon do skrótową, że jednym kawałku. Po tym, jak wyjmę ten fragment, mogę skupić się na testowaniu innych części tego komponentu, które nie mają nic wspólnego z oknem.

moja metoda testowa:

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/szpiedzy/drwi działa tylko z funkcji. W tym przypadku próbujesz wyśmiać zmienną globalną (zagnieżdżoną), dla której Sinon nie jest właściwym narzędziem.

Zamiast tego, podobnie jak w przeglądarce, można utworzyć obiekt globalny, który kpi z właściwej ilości window do pracy z komponentem, co jest łatwe, ponieważ umożliwia dostęp tylko do window.location.host.

Więc zanim instancji komponentu, oświadczam co następuje:

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