Gesture with coffeescript jsx?

Question

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

The only CoffeeScript example provided by Jest uses simple CoffeeScript and does not work with CoffeeScript + React JSX (syntax error when it reaches < ).

What i tried

first try: 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 (good 12 seconds for a dummy test).

Then I tried:

second attempt: coffee-reaction-conversion

 // 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 causes a strange error, for example:

TypeError: function () {...} does not have a getPooled method

The only Google result for “does not have a getPooled method” is this meaning , which accurately shows the error I am getting, but does not offer other ideas.

third possible attempt

I think I could use coffee-reactify , but it returns a stream that is asynchronous, and the process function in preprocess.js used synchronously, and has not yet found a way to read the stream synchronously.

What can I do?

Answer 1

I think your second approach was correct, except that you did not (I guess here) add a reaction to "unmockedModulePathPatterns" in the jest package.json property. This is usually the result of a 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 to eliminate because errors can occur anywhere during the jsx -> coffee -> js -> jest pipeline and are swallowed soundlessly. It was very useful for me to eliminate this by doing the conversion in a separate file to make sure jsx -> coffee and coffee -> js happened correctly, and then run the jest preprocessor.

Answer 2

I just published a unit test boiler plate for Jest that works with React and CoffeeScript.

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

The preprocessor should be as follows:

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

Answer 3

Based on the user2534631 template project, I improved the use of coffee-react-transform to compile CJSX files.

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

Therefore, use CJSX syntax to write React components.

 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>