用Jest测试Webpack构建的React组件 [英] Testing Webpack built React components with Jest
问题描述
我遇到了一个问题,我需要在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.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
文件,该文件会除去需要Webpack构建的非Javascript文件的requires
,例如需要.css
,.less
,.jpegs
等.这样,我们可以测试React组件,而不能进行其他测试.>
问题:我想测试Webpack构建所创建的一些功能.例如,我使用本地可互操作的CSS,并且我想测试从Webpack创建的require('whaterver.css')
返回的CSS类的对象.我还想使用React/TestUtils
中的findRenderedDOMComponentWithClass
,这意味着我需要通过Webpack构建CSS.
解决方案2:
使用scriptPreprocessor
脚本,该脚本通过Webpack运行组件并构建测试文件(例如 jest-webpack 确实)并在此输出上运行测试.
问题:我们不再像现在使用Webpacks __webpack_require__(1)
那样使用Jest的自动模拟.每次运行测试文件时,构建速度都很慢.
解决方案3:
与解决方案2相似,但是在运行npm test
来解决缓慢的构建时间之前,仅对所有测试文件运行一个构建.
问题:与解决方案2相同.没有自动嘲笑.
我是在错误的道路上吗,还是有人对此有任何答案?我想念明显的东西吗?
我最近构建了 Jestpack 它将Jest与Webpack集成在一起,这意味着您可以使用Webpack的所有功能,包括CSS模块,文件加载,代码拆分,CommonJS/AMD/ES2015导入等,以及Jest的自动模拟.
I have come across a problem where I need to run Jest tests on a React application that is being built by Webpack. The problem is handling the require
of CSS files and images etc that Webpack would usually process with a loader. I need to know about what is the best approach to test my components correctly.
The React component:
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;
The Jest test:
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.');
});
});
I have come across this question which reassured me I was on the right lines having tried all these approaches myself but I have issues with all of the solutions I have come across:
Solution 1:
Use a scriptPreprocessor
file which strips out requires
of non Javascript files that require a Webpack build e.g requiring .css
, .less
, .jpegs
etc. This way we can tests the React component but nothing else.
Problem: I want to test some of the functionality that the Webpack build creates. E.g I use local, interoperable CSS and I want to test the Object of CSS classes returned from a require('whaterver.css')
which Webpack creates. I also want to use findRenderedDOMComponentWithClass
from React/TestUtils
which means I need to build the CSS through Webpack.
Solution 2:
Use scriptPreprocessor
script which runs the component through Webpack and builds a test file (like jest-webpack does) and run tests on this output.
Problem: We can no longer use Jest's auto mocking as we would now be using Webpacks __webpack_require__(1)
. This is also slow to build every time you run a test file.
Solution 3:
Much like solution 2 but run only one build for all test files before running npm test
to solve the slow build time.
Problem: Same as Solution 2. No auto mocking.
Am I on the wrong path here or does anyone have any answers for this? Am I missing the obvious?
I recently built Jestpack which integrates Jest with Webpack meaning you can use all of Webpack's features including CSS modules, file loading, code splitting, CommonJS / AMD / ES2015 imports etc. along with Jest's auto mocking.
这篇关于用Jest测试Webpack构建的React组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!