सिनन, मोचा, एंजाइम, और प्रतिक्रिया

Question

के साथ विंडो मॉकिंग मैं ऊपर सूचीबद्ध चार पुस्तकालयों के साथ उपयोग कर रहे घटक के लिए विंडो ऑब्जेक्ट को मॉक करने का प्रयास कर रहा हूं।

मुझे पता है कि यह JSDom के साथ किया जा सकता है लेकिन क्लाइंट इसका उपयोग करने के खिलाफ है। मेरे शोध के आधार पर केवल sinon.stub (विंडो, 'स्थान') काम करना चाहिए, लेकिन जब मैं अपने परीक्षण चलाता हूं तब भी मुझे अपने घटक में विंडो को अपरिभाषित किया जाता है।

वर्तमान में घटक वापसी प्रस्तुत करना {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

सिनोन स्टब्स/जासूस/केवल कार्यों के साथ काम का मजाक उड़ाता है। इस मामले में, आप एक वैश्विक (नेस्टेड) ​​चर का नकल करने की कोशिश कर रहे हैं, जिसके लिए साइनन सही उपकरण नहीं है।

इसके बजाए, ब्राउज़र की तरह ही, आप एक वैश्विक ऑब्जेक्ट बना सकते हैं जो आपके घटक के साथ काम करने के लिए window की सही राशि का उपयोग करता है, जो आसान है क्योंकि यह केवल window.location.host तक पहुंचता है।

तो घटक instantiating से पहले, की घोषणा के बाद:

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