Web paketi test etme Jest

Question

ile reaktif bileşenleri Reak testlerini Webpack tarafından oluşturulmuş bir React uygulamasında çalıştırmam gereken bir problemle karşılaştım. Sorun, Webpack'in genellikle bir yükleyici ile işleyeceği CSS dosyalarının ve görüntülerinin vb. require'unu işlemektir. Bileşenleri doğru şekilde test etmenin en iyi yolunun ne olduğunu bilmem gerek.

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; 

Jest testi:

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.'); 
    }); 

}); 

denedim ettikten sağ hatlarda oldu bana güvence this question rastlamak

tüm bu kendim yaklaşır

bileşeni Tepki ama karşılaştığım tüm çözümlerle ilgili sorunlarım var:

Çözüm 1: kullanın WebPack biz bileşeni ama başka bir şey Tepki testleri yapabilirsiniz .css, .less, .jpegs vs. Bu şekilde gerektiren örneğin inşa gerektiren olmayan JavaScript dosyalarının requires çıkarır bir scriptPreprocessor dosyası.

Sorun: Webpack derlemesinin oluşturduğu bazı işlevleri sınamak istiyorum. E.g Yerel, birlikte çalışabilir CSS kullanıyorum ve Webpack'in oluşturduğu bir require('whaterver.css')'dan döndürülen CSS sınıflarının Nesnesini test etmek istiyorum. Ayrıca, React/TestUtils'dan findRenderedDOMComponentWithClass'u kullanmak istiyorum, bu da CSS'yi Webpack üzerinden oluşturmam gerektiği anlamına geliyor.

Çözüm 2: kullanın scriptPreprocessor WebPack aracılığıyla bileşeni çalışır ve bir test dosyası oluşturur komut dosyası (gibi jest-webpack yapar) ve bu çıkışı üzerinde çalışan testler.

Sorun: Artık Webpacks __webpack_require__(1) kullanıyor olacağından Jest'in otomatik alayını kullanamayız. Bu, bir test dosyasını her çalıştırdığınızda da yavaştır.

Çözüm 3: Çok solüsyon 2 gibi ama yavaş inşa süresini çözmek için npm test çalıştırmadan önce tüm test dosyaları için tek yapı çalıştırın.

Sorun: Çözüm 2 ile aynı. Otomatik alay yok.

Burada yanlış yolda mıyım yoksa bunun için herhangi bir cevabı olan var mı? Açık olanı mı özlüyorum?

Answer 1

Jest'in otomatik alayla birlikte CSS modülleri, dosya yükleme, kod bölme, CommonJS/AMD/ES2015 içe aktarma vb. Dahil olmak üzere tüm Webpack özelliklerini kullanabileceğiniz anlamına gelen Webpack'i WebPart ile bütünleştiren Jestpack'u yeni inşa ettim.