测试Webpack使用Jest构建React组件

时间:2015-07-21 19:07:34

标签: unit-testing reactjs webpack jestjs webpack-style-loader

我遇到了一个问题,我需要在由Webpack构建的React应用程序上运行Jest测试。问题是处理Webpack通常用加载器处理的CSS文件和图像等require。我需要知道正确测试组件的最佳方法是什么。

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这让我放心,我自己也尝试了所有这些方法,但我遇到了所遇到的所有解决方案的问题:

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

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

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

问题:我们现在无法再使用Jest的自动模拟,因为我们现在正在使用Webpack __webpack_require__(1)。每次运行测试文件时,这也很慢。

解决方案3: 与解决方案2非常相似,但在运行npm test之前只为所有测试文件运行一个构建,以解决构建时间过长的问题。

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

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

1 个答案:

答案 0 :(得分:4)

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