web-dev-qa-db-fra.com

Fenêtre moqueuse avec Sinon, Mocha, Enzyme et React

J'essaie de simuler l'objet fenêtre d'un composant que j'utilise avec seulement les quatre bibliothèques répertoriées ci-dessus.

Je sais que cela peut être fait avec JSDom mais le client est contre son utilisation. Sur la base de mes recherches, faire simplement sinon.stub (window, 'location') devrait fonctionner mais quand je lance mes tests, je ne reçois toujours pas Window dans mon composant.

Actuellement, le composant est appelé dans le rendu return {window.location.Host}

toute pensée à ce que je fais mal pour obtenir sinon de détacher cette pièce. Une fois que j'ai tronqué cette pièce, je peux me concentrer sur le test des autres parties de ce composant qui n'ont rien à voir avec la fenêtre.

Ma méthode de test:

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();


        })


    });

});
unit-testingreactjsmochasinon
13
DimlyAware

Les talons/espions/maquettes Sinon ne fonctionnent qu'avec des fonctions. Dans ce cas, vous essayez de simuler une variable globale (imbriquée), pour laquelle Sinon n'est pas le bon outil.

Au lieu de cela, comme dans un navigateur, vous pouvez créer un objet global qui se moque juste de la bonne quantité de window pour fonctionner avec votre composant, ce qui est facile car il accède uniquement à window.location.Host.

Donc, avant d'instancier le composant, déclarez ce qui suit:

global.window = { location : { Host : 'example.com' } };
29
robertklep