Test di Webpack con componenti React con Jest

Question

Mi sono imbattuto in un problema in cui ho bisogno di eseguire test Jest su un'applicazione React che viene creata da Webpack. Il problema è gestire lo require di file CSS e immagini ecc. Che Webpack di solito elaborerebbe con un caricatore. Devo sapere qual è l'approccio migliore per testare correttamente i miei componenti.

Il React componente:

import React from 'react'; 
// The CSS file is the problem as I want to actually test what it 
// returns after webpack has built it. 
import style from './boilerplate.css'; 

var Boilerplate = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1 className={style.title}>react-boilerplate</h1> 
       <p className={style.description}> 
        A React and Webpack boilerplate. 
       </p> 
      </div> 
     ); 
    } 
}); 

export default Boilerplate; 

Il test Jest:

jest.dontMock('./boilerplate.js'); 

var Boilerplate = require('./boilerplate.js'); 
var React = require('react/addons'); 
var TestUtils = React.addons.TestUtils; 

describe('boilerplate', function() { 

    var component; 

    beforeEach(function() { 
     component = TestUtils.renderIntoDocument(
      <Boilerplate /> 
     ); 
    }); 

    it('has a h1 title', function() { 
     // I want to actually use 'findRenderedDOMComponentWithClass' 
     // but cannot because I need to run the Webpack build to add a 
     // CSS class to this element. 
     var title = TestUtils.findRenderedDOMComponentWithTag(component, 'h1'); 
     expect(title.getDOMNode().textContent).toEqual('react-boilerplate'); 
    }); 

    it('has a paragraph with descriptive text', function() { 
     var paragraph = TestUtils.findRenderedDOMComponentWithTag(component, 'p'); 
     expect(paragraph.getDOMNode().textContent).toEqual('A React and Webpack boilerplate.'); 
    }); 

}); 

mi sono imbattuto this question che mi ha rassicurato che ero sulla strada giusta dopo aver provato tutte queste cose me si avvicina ma ho problemi con tutte le soluzioni che ho incontrato:

Soluzione 1: Utilizzare un file scriptPreprocessor, che mette a nudo fuori requires di file non Javascript che richiedono un Webpack costruire per esempio richiedendo .css, .less, .jpegs ecc In questo modo siamo in grado di prove il componente, ma niente altro reagire.

Problema: Voglio testare alcune delle funzionalità create dal build di Webpack. E.g Uso il CSS locale e interoperabile e voglio testare l'oggetto delle classi CSS restituite da uno require('whaterver.css') creato da Webpack. Voglio anche usare findRenderedDOMComponentWithClass da React/TestUtils il che significa che ho bisogno di costruire il CSS tramite Webpack.

Soluzione 2: Usa scriptPreprocessor script che viene eseguito il componente attraverso Webpack e costruisce un file di prova (come jest-webpack fa) ed eseguire test su questa uscita.

Problema: Non possiamo più usare l'auto derisione di Jest come ora utilizzerei Webpacks __webpack_require__(1). Anche questo è lento da creare ogni volta che si esegue un file di test.

Soluzione 3: Molto simile soluzione 2, ma eseguito solo una generazione per tutti i file di test prima di eseguire npm test per risolvere il tempo di costruzione lenta.

Problema: Uguale a Soluzione 2. Nessun auto derisione.

Sono sulla via sbagliata qui o qualcuno ha delle risposte per questo? Mi manca l'ovvio?

Answer 1

Di recente ho creato Jestpack che integra Jest con Webpack, il che significa che è possibile utilizzare tutte le funzionalità di Webpack tra cui moduli CSS, caricamento file, suddivisione del codice, importazioni CommonJS/AMD/ES2015 ecc. Insieme all'auto mocking di Jest.