我使用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 test,我收到以下错误:

SyntaxError:/Users/mishamoroshko/react-component/src/tests/MyComponent.js:/Users/mishamoroshko/react-component/src/MyComponent.js:/Users/mishamoroshko/react-component/src/MyComponent.less:Unexpected令牌ILLEGAL

看起来webpack需要require('./MyComponent.less')在jest运行测试之前进行处理.

我想知道我是否需要使用像jest-webpack这样的东西.如果是,有没有办法指定多个scriptPreprocessors？(注意我已经使用过babel-jest)

如何使用Jest测试用CoffeeScript + React jsx编写的React组件？

Jest提供的唯一CoffeeScript示例使用普通的CoffeeScript,但不能与CoffeeScript + React JSX一起使用(语法错误到达时<).

我试过了什么

第一次尝试:execSync

// preprocessor.js
var execSync = require('exec-sync');

module.exports = {
  process: function (src, path) {
    return execSync('browserify -t coffee-reactify ' + path);
  }
};

这可行,但需要花费太多时间(虚拟测试需要12秒).

然后我尝试了:

第二次尝试:咖啡反应变换

// preprocessor.js
var coffee = require('coffee-script');
var transform = require('coffee-react-transform');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.coffee$/)) {
      return coffee.compile(transform(src), {'bare': true});
    }
    return src;
  }
};

这引发了一个奇怪的错误,如:

TypeError:function(){...}没有方法'getPooled'

"没有方法'getPooled'"的唯一Google结果就是这个要点,它显示了我得到的错误,但没有提供任何其他见解.

第三种可能的尝试

我想我可以使用coffee-reactify,但是它会返回一个异步的流,而process函数in preprocess.js是同步使用的,到目前为止,没有找到同步读取流的方法. …

我有一个非常简单的测试

/** @jsx React.DOM */
var store = require('../simpleStore');
var TestUtils = require('react/addons').addons.TestUtils;

describe("my tests",function(){
  it('simple test',function(){
     var x=10,
        y=20;
     expect(x).not.toBe(y);
  })
})

只要我不需要TestUtils,测试就可以正常工作.我添加任何node_module引用的那一刻,我开始看到下面的错误

Using Jest CLI v0.8.0, jasmine1
FAIL  build/stores/__tests__/simple-test.js

? Runtime Error

Error: ../stores/__tests__/simple-test.js:
../../node_modules/react/addons.js:
../../node_modules/react/lib/ReactWithAddons.js:
../../node_modules/react/lib/LinkedStateMixin.js:
../../node_modules/react/lib/ReactLink.js:
../../node_modules/react/lib/React.js:
../../node_modules/react/lib/ReactDOM.js:
../../node_modules/react/lib/ReactDOMTextComponent.js:
../../node_modules/react/lib/ReactComponentBrowserEnvironment.js:
../../node_modules/react/lib/ReactDOMIDOperations.js:
../../node_modules/react/lib/ReactMount.js:
../../node_modules/react/lib/ReactElement.js: Failed to get mock metadata:
../../node_modules/react/lib/canDefineProperty.js
npm ERR! Test failed.  See above for more details.

我敢肯定很多人都在使用开玩笑而且我错过了一些愚蠢的东西......是否有任何想法可以解决这个问题？