Come deridere i sottocomponenti quando l'unità testa un componente React con Jest

Ho un componente React che sto cercando di scrivere su alcuni test. L'ho suddiviso per il test più semplice possibile.Come deridere i sottocomponenti quando l'unità testa un componente React con Jest

jest.dontMock('../Overlay.react.js'); 

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var Overlay = require('../Overlay.react.js'); // this is the culprit! 

describe('Overlay',() => { 
    it('should work',() => { 
     expect(true).toEqual(true); 
    }); 
});

Nel richiedere la componente che sto cercando di testare, sembra di non essere beffardo sue sottocomponenti. Nella parte superiore del Overlay.react.js, ho la seguente importazione: import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; Quando si esegue la mia prova, ottengo il seguente errore:

SyntaxError: /Users/dev/work/react-prototype/src/components/root/routes/components/subset1/components/Overlay.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/sass/style.sass: Unexpected token ILLEGAL

Sembra che invece di scherno dei componenti, si sta andando a destra fino al sottocomponente di sass file e gettando una misura. La mia comprensione era che Jest si burla di tutto tranne che per quello che dici a non simulato.

Qual è il modo corretto di formulare questi test in modo che i componenti secondari non facciano esplodere il jest durante l'importazione durante un test?

fonte

2015-12-01 Jim

Leggermente supponente, ma sto solo pensando a te. Stai per ricevere molti di questi tipi di errori usando il jest, inoltre ti imbatterai in problemi di prestazioni quando inizi a testare qualcosa di non banale. Dai un'occhiata ad alcuni [problemi] aperti (https://github.com/facebook/jest/issues/116) di jest e valuta se usare moka o gelsomino sarebbe una scelta migliore per il testing framework. – enjoylife

Altrimenti dai un'occhiata a questa domanda (http://stackoverflow.com/questions/27346687/reactjs-testing-components-contain-components) per ulteriori informazioni. – enjoylife

@mattclemens Interessante. Ho appena letto sul test che reagisce ai componenti con jest, quindi quello era il default. Leggerò un po '... La domanda a cui ti sei collegato è più legata al fatto che i sottocomponenti siano passati al componente che stai provando a testare, piuttosto che all'importazione. – Jim

Se si richiedono i file SASS e LESS e CSS nel componente principale anziché in ciascun componente secondario, non si otterrà questo problema mentre si testano i componenti da soli.

Ci sono altre soluzioni citate in questo rapporto di problemi se non ti piace quello che ho fornito. Issue 334

fonte

2015-12-14 20:11:07

La richiesta nel componente principale evita che vengano importati nei componenti di livello inferiore, ma non è possibile seguire lo schema di raggruppamento del file .js di un componente con il suo stile. Ho aggiunto 'if (filename.match (/. Sass /) || filename.match (/. Less /) || filename.match (/. Css /)) { return ''; } 'al mio preprocessore, che ha superato l'errore sass, ma sembra che stia tirando dentro ogni negozio e azione quando si esegue un test per un singolo componente (piuttosto che deriderli tutti). L'appello di Jest era l'automocking, sembra strano ... – Jim

Bene, allora mi dispiace non aver potuto aiutare. Hai controllato il problema? –

Come deridere i sottocomponenti quando l'unità testa un componente React con Jest

risposta

Problemi correlati