Тестирование компонентов React, созданных Webpack, с помощью Jest

Я столкнулся с проблемой, когда мне нужно запустить тесты Jest в приложении React, которое создается Webpack. Проблема заключается в обработке require файлов CSS, изображений и т. д., которые Webpack обычно обрабатывает с помощью загрузчика. Мне нужно знать, как лучше всего правильно тестировать мои компоненты.

Компонент 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.');
    });

});

Я наткнулся на этот вопрос, который убедил меня, что я на правильном пути, имея пробовал все эти подходы сам, но у меня есть проблемы со всеми решениями, с которыми я столкнулся:

Решение 1. Используйте файл scriptPreprocessor, который удаляет requires файлов, отличных от Javascript, для которых требуется сборка Webpack, например, требующих .css, .less, .jpegs и т. д. Таким образом мы можем протестировать компонент React, но ничего больше.

Проблема. Я хочу протестировать некоторые функции, создаваемые сборкой Webpack. Например, я использую локальный совместимый CSS и хочу протестировать классы Object of CSS, возвращенные из require('whaterver.css'), который создает Webpack. Я также хочу использовать findRenderedDOMComponentWithClass из React/TestUtils, что означает, что мне нужно собрать CSS через Webpack.

Решение 2. Используйте скрипт scriptPreprocessor, который запускает компонент через Webpack и создает тестовый файл (например, jest-webpack делает) и запустите тесты на этом выходе.

Проблема. Мы больше не можем использовать Jest auto mocking, поскольку теперь мы будем использовать Webpacks __webpack_require__(1). Это также медленно создается каждый раз, когда вы запускаете тестовый файл.

Решение 3. Очень похоже на решение 2, но запускайте только одну сборку для всех тестовых файлов перед запуском npm test, чтобы решить проблему медленной сборки.

Проблема. То же, что и решение 2. Нет автоматического имитации.

Я на неправильном пути или у кого-нибудь есть ответы на этот вопрос? Я упускаю очевидное?