单元测试 – 使用Jest测试Webpack构建的React组件

React组件：

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

});

我遇到了this question,这让我放心,我自己尝试了所有这些方法,但我遇到了所有解决方案的问题：

解决方案1：
使用scriptPreprocessor文件去除需要Webpack构建的非Javascript文件,例如需要.css,.less,.jpegs等.这样我们就可以测试React组件,但没有别的.

问题：我想测试Webpack构建创建的一些功能.例如,我使用本地的,可互操作的CSS,我想测试从Webpack创建的require(‘whaterver.css’)返回的CSS类的Object.我还想使用React / TestUtils中的findRenderedDOMComponentWithClass,这意味着我需要通过Webpack构建CSS.

解决方案2：
使用scriptPreprocessor脚本,它通过Webpack运行组件并构建一个测试文件(如jest-webpack)并在此输出上运行测试.

问题：我们不能再使用Jest的自动模拟,因为我们现在使用Webpacks __webpack_require __(1).每次运行测试文件时,这也很慢.

解决方案3：
与解决方案2非常相似,但在运行npm测试以解决缓慢的构建时间之前,只为所有测试文件运行一个构建.

问题：与解决方案2相同.没有自动模拟.

我在这里走错路还是有人对此有任何答案？我错过了明显的吗？