我遇到了一个问题,我需要在由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相同。没有自动模拟。
我在这里走错路还是有人对此有任何答案?我错过了明显的吗?
答案 0 :(得分:4)
我最近构建了Jestpack,它将Jest与Webpack集成,这意味着您可以使用所有Webpack的功能,包括CSS模块,文件加载,代码分割,CommonJS / AMD / ES2015导入等以及Jest的自动模拟。