10

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

Jest 提供的唯一 CoffeeScript 示例使用普通的 CoffeeScript，并且不适用于 CoffeeScript + React JSX（到达 a 时的语法错误<）。

我试过的

第一次尝试：execSync

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

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

这可行，但需要太多时间（对于虚拟测试来说，12 秒很好）。

然后我尝试了：

第二次尝试：coffee-react-transform

// 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'”的唯一谷歌结果是这个要点，它准确地显示了我得到的错误，但没有提供其他见解。

第三次可能的尝试

我想我可以使用coffee-reactify，但它返回一个异步流，而 in 中的process函数preprocess.js是同步使用的，到目前为止还没有办法同步读取流。

我能做些什么？

4

3 回答 3

8

我认为你的第二种方法是正确的，除了你没有（我在这里猜）在jestpackage.json 的属性中添加对“unmockedModulePathPatterns”的反应。这通常是getPooled我的经验错误的结果。

以下对我有用：

包.json

  // ...
  "jest": {
    "unmockedModulePathPatterns": ["<rootDir>/node_modules/react"],
    "testFileExtensions": [
      "js",
      "coffee"
    ],
    "scriptPreprocessor": "<rootDir>/preprocessor.js"
  }

预处理器.js

// I found it simpler to use coffee-react,
// since it does the jsx transform and coffeescript compilation 
var coffee = require('coffee-react');

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

整个过程很难排除故障，因为错误可能在jsx -> coffee -> js -> jest管道中的任何地方发生并被默默吞下。我发现通过在单独的文件中运行转换以确保正确发生，然后运行 ​​jest 预处理器来解决此问题最有jsx -> coffee帮助coffee -> js。

于 2014-11-26T17:43:12.507 回答
4

我刚刚发布了一个适用于 React 和 CoffeeScript 的 Jest 样板单元测试。

https://github.com/Cotidia/jest-react-coffeescript

预处理器需要如下：

var coffee = require('coffee-script');
var ReactTools = require('react-tools');

module.exports = {
  process: function(src, path) {
    // console.log('src', src);
    if (path.match(/\.coffee$/)) {

        // First we compile the coffeescript files to JSX
        compiled_to_js = coffee.compile(src, {bare: true});

        // Then we compile the JSX to React
        compiled_to_react = ReactTools.transform(compiled_to_js)

      return compiled_to_react;
    }
    return src;
  }
};
于 2015-02-19T11:43:49.277 回答
1

基于user2534631的模板工程，我增强了使用coffee-react-transform编译CJSX文件。

https://github.com/redice/jest-react-coffeescript

var coffee = require('coffee-script');
var transform = require('coffee-react-transform');

module.exports = {
  process: function(src, path) {
    if (coffee.helpers.isCoffee(path)) {
      compiled_cjx = transform(src);
      compiled_to_react = coffee.compile(compiled_cjx, {bare: true});

      return compiled_to_react;
    }

    return src;
  }
};

所以使用 CJSX 语法来编写 React 组件。

render: ->
  <label>
    <input
      type="checkbox"
      checked={this.state.isChecked}
      onChange={this.onChange} />
    {if this.state.isChecked then this.props.labelOn else this.props.labelOff}
  </label>
于 2015-10-05T10:49:59.657 回答