derisione Finestra con Sinon, Mocha, enzimatico e Reagire

Question

sto cercando di deridere l'oggetto finestra per un componente che sto utilizzando con solo le quattro librerie di cui sopra.

so che può essere fatto con JSDom ma il cliente è contro l'uso di esso. Basandomi sulla mia ricerca semplicemente facendo sinon.stub (finestra, 'location') dovrebbe funzionare, ma quando eseguo i miei test ho ancora Windows indefinito nel mio componente.

Attualmente il componente è chiamato all'interno del ritorno render {} window.location.host

alcun pensiero a quello che sto facendo male per arrivare Sinon a spegnere che un pezzo. Una volta che cancello fuori quel pezzo, posso concentrarmi sul test delle altre parti di quel componente che non hanno nulla a che fare con la finestra.

mio Metodo di prova:

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 stub/spie/deride funzionano solo con le funzioni. In questo caso, stai cercando di prendere in giro una variabile globale (annidata), per la quale Sinon non è lo strumento giusto.

Invece, proprio come in un browser, è possibile creare un oggetto globale che prende in giro la giusta quantità di window per lavorare con il componente, che è facile perché accede solo a window.location.host.

Quindi, prima di creare un'istanza del componente, dichiara quanto segue:

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