jest用咖啡豆jsx？ [英] Jest with coffeescript jsx?

问题描述

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

Jest提供的唯一CoffeeScript示例使用纯CoffeeScript，不工作with CoffeeScript + React JSX（语法错误，当它到达< ）。

h1>

第一次尝试：execSync

  // preprocessor.js 
 var execSync = require（'exec-sync'）; 
 
 module.exports = {
 process：function（src，path）{
 return execSync（'browserify -t coffee-reactify'+ path）; 
} 
}; 
  

这可以工作，但需要太多时间p>

然后我尝试：

第二次尝试：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'

唯一的Google搜索结果是没有方法getPooled =https://gist.github.com/kristoferjoseph/27c3e09eb1ec3443b5df>这个提示，它显示了我得到的错误，但没有提供其他见解。

第三次尝试

我想我可以使用 coffee-reactify ，但它返回一个流，它是异步的，而 preprocess.js 中的过程

我可以做什么？

解决方案

我认为你的第二种方法是正确的，除非你没有（我猜这里）添加反应到unmockedModulePathPatterns在 jest package.json的属性。这通常是我遇到的 getPooled 错误的结果。

以下适用于我：

package.json

  // .. 。
jest：{
unmockedModulePathPatterns：[< rootDir> / node_modules / react]，
testFileExtensions：[
js，
coffee
]，
scriptPreprocessor：< rootDir> /preprocessor.js
} 
  

preprocessor.js

  // I发现它更容易使用咖啡反应，
 //因为它做jsx变换和coffeescript编译
 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预处理器。

How can I use Jest to test React components written in 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 <).

What I have tried

first attempt: execSync

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

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

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

Then I tried:

second attempt: 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;
  }
};

This throws a strange error, like:

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

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

third possible attempt

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.

What can I do?

解决方案

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.

The following works for me:

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

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.

这篇关于jest用咖啡豆jsx？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！