我使用
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,'');
- }
- };
但是，我仍然想知道什么是这个问题的正确解决方案。
