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

Question

我遇到了一个问题，我需要运行对由 Webpack 构建的 React 应用程序进行 Jest 测试。问题是处理 require of 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 测试：

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，这让我放心，我自己尝试了所有这些方法，但我对遇到的所有解决方案都有疑问：

解决方案一： 使用 scriptPreprocessor 文件去除 requires 需要 Webpack 构建的非 Javascript 文件，例如需要 .css、.less、.jpegs 等。这样我们就可以测试 React 组件，但不能测试其他组件。

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

方案二： 使用 scriptPreprocessor 脚本，该脚本运行通过 Webpack 构建一个测试文件（就像 jest-webpack 所做的那样）并且运行测试这个输出。

问题： 我们不能再像现在使用 Webpacks 那样使用 Jest 的自动模拟 __webpack_require__(1)。每次运行测试文件时，构建速度也很慢。

方案三： 与解决方案 2 非常相似，但运行在运行宁 npm test 之前只对所有测试文件进行一次构建，以解决缓慢的构建时间。

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

我是不是走错了路，或者有人对此有任何答案吗？我错过了显而易见的东西吗？

Answer 1

我最近构建了 Jestpack，它将 Jest 与 Webpack 集成在一起，这意味着您可以使用 Webpack 的所有功能，包括 CSS 模块、文件加载、代码拆分、CommonJS / AMD / ES2015 导入等Jest 的自动模拟。

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

Testing Webpack built React components with Jest

unit-testing

reactjs

webpack

jestjs

webpack-style-loader