Spottfenster mit Sinon, Mocha, Enzym und Reagieren

Question

Ich versuche, das Fensterobjekt für eine Komponente zu verspotten, die ich nur mit den vier oben aufgeführten Bibliotheken verwende.

Ich weiß, dass es mit JSDom getan werden kann, aber der Client ist gegen die Verwendung. Basierend auf meinen Recherchen sollte einfach sinon.stub (Fenster, 'location') funktionieren, aber wenn ich meine Tests starte, bekomme ich in meiner Komponente immer noch undefined Window.

Derzeit wird die Komponente innerhalb der Render Rückkehr {window.location.host} genannt

irgendwelche Gedanken zu dem, was ich tue, falsch sinon zu bekommen, dass ein Stück Stub. Sobald ich dieses Stück ausgesondert habe, kann ich mich darauf konzentrieren, die anderen Teile dieser Komponente zu testen, die nichts mit dem Fenster zu tun haben.

Meine Testmethode:

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/Spion/spottet nur mit Funktionen arbeiten. In diesem Fall versuchen Sie, eine globale (verschachtelte) Variable zu verhöhnen, für die Sinon nicht das richtige Werkzeug ist.

Stattdessen können Sie wie in einem Browser ein globales Objekt erstellen, das genau die richtige Menge von window anspricht, um mit Ihrer Komponente zu arbeiten, was einfach ist, da es nur auf window.location.host zugreift.

Also, bevor die Komponente instanziiert wird, erklären die folgenden:

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