用coffeescript jsx开玩笑? [英] Jest with coffeescript jsx?

问题描述

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

How can I use Jest to test React components written in CoffeeScript + React jsx?

与 Jest 一起提供的唯一 CoffeeScript 示例使用普通的 CoffeeScript，并且不适用于 CoffeeScript + React JSX(到达 < 时出现语法错误).

The only CoffeeScript example provided with Jest uses plain CoffeeScript, and doesn't work with CoffeeScript + React JSX (syntax error when it reaches a <).

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

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

这行得通，但需要太多时间(对于虚拟测试来说，12 秒很好).

This works, but takes too much time (a good 12 seconds for a dummy test).

然后我尝试:

// 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;
  }
};

这会抛出一个奇怪的错误，比如:

This throws a strange error, like:

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

TypeError: function() {...} has no method 'getPooled'

没有方法 'getPooled'"的唯一 Google 结果是这个要点，它准确地显示了我的错误获得，但不提供其他见解.

The only Google result for "has no method 'getPooled'" is this gist, that shows exactly the error I get, but offers no other insights.

我想我可以使用 coffee-reactify，但它返回一个异步流，而 <preprocess.js中的code>process函数是同步使用的，目前还没有找到同步读取流的方法.

I think I could use coffee-reactify, but it returns a stream, which is asynchronous, while the process function in preprocess.js is used synchronously, and have found no way, so far, to read a stream synchronously.

我能做什么?

推荐答案

我认为你的第二种方法是正确的，除了你没有(我在这里猜测)在 jest 中添加对unmockedModulePathPatterns"的反应代码> package.json 的属性.根据我的经验，这通常是 getPooled 错误的结果.

I think your second approach was correct, except you did not (I'm guessing here) add react to "unmockedModulePathPatterns" in the jest property of package.json. That is typically the result of the getPooled error in my experience.

以下对我有用:

package.json

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

preprocessor.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 -> 期间的任何地方都可能发生错误.咖啡 ->js->jest 管道并被默默吞下.我发现通过在单独的文件中运行转换以确保 jsx ->咖啡和咖啡->js 正确发生，然后运行 ​​jest 预处理器.

This whole process is difficult troubleshoot because errors can happen anywhere during the jsx -> coffee -> js -> jest pipeline and get silently swallowed. I found it most helpful to troubleshoot this by running the transform in a separate file to make sure the jsx -> coffee and coffee -> js happened properly, and then run the jest preprocessor.

这篇关于用coffeescript jsx开玩笑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！