我使用
webpack开发一个React组件。这里是一个简单的版本：
'use strict';
require('./MyComponent.less');
var React = require('react');
var MyComponent = React.createClass({
render() {
return (
<div className="my-component">
Hello World
</div>
);
}
});
module.exports = MyComponent;
现在，我想使用jest测试这个组件。这里是我的package.json的相关位：
"scripts": {
"test": "jest"
},"jest": {
"rootDir": ".","testDirectoryName": "tests","scriptPreprocessor": "<rootDir>/node_modules/babel-jest","unmockedModulePathPatterns": [
"react"
]
}
当运行npm测试时，我得到以下错误：
SyntaxError: /Users/mishamoroshko/react-component/src/tests/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.less: Unexpected token ILLEGAL
看起来像webpack需要处理require(‘./ MyComponent.less’)before jest可以运行测试。
我不知道我是否需要使用像jest-webpack.如果是，有没有办法指定多个scriptPreprocessors？ (注意，我已经使用babel-jest)
解决方法
我结束了以下黑客：
// package.json
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",...
}
// jest-script-preprocessor.js
var babelJest = require("babel-jest");
module.exports = {
process: function(src,filename) {
return babelJest.process(src,filename)
.replace(/^require.*\.less.*;$/gm,'');
}
};
但是，我仍然想知道什么是这个问题的正确解决方案。
