Sinon, Mocha, Enzyme, React가있는 조롱 창

Question

위에 나열된 네 개의 라이브러리 만 사용하는 구성 요소의 창 개체를 조롱하려고합니다.

나는 JSDom으로 할 수 있지만 클라이언트는 그것을 사용하지 않는다는 것을 알고있다. 내 연구를 기반으로 단순히 sinon.stub (window, 'location')을 수행해야하지만 테스트를 실행해도 내 구성 요소에는 Window가 정의되지 않습니다.

현재 구성 요소는 한 조각 것을 스텁 sinon를 얻기 위해 내가 잘못 뭐하는 거지로 렌더링 반환 {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(); 


     }) 


    }); 

}); 

Answer 1

Sinon 스텁/스파이/기능 만 작동 망신 시켰습니다. 이 경우 Sinon이 올바른 도구가 아닌 전역 (중첩 된) 변수를 조롱하려고합니다.

대신 브라우저 에서처럼 올바른 숫자의 window을 모의 해 컴포넌트로 작업 할 수 있습니다. 이는 단지 window.location.host 만 액세스하기 때문에 쉽습니다.

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