My team has been using both coffeescript and ES6/ES2015 (via Babel) in our project. Since the files are ultimately compatible due to Babel, it's been working great. But I can't figure out how we can write a jest test that allows both.
我的团队一直在我们的项目中使用coffecript和ES6/ES2015(通过Babel)。由于Babel的缘故,这些文件最终是兼容的,所以运行得很好。但是我不知道如何编写一个同时允许两者的jest测试。
I've found examples of how to use jest with coffee, or ES6 features, but not both:
我已经找到了如何使用咖啡或ES6功能的例子,但不是两者都有:
- Example with coffeescript
- coffeescript的示例
- Another example with coffeescript
- 另一个例子与coffeescript
- Example with Babel
- 巴别塔的示例
- Somewhere someone suggested to set the preprocessor as
babel-jest
, which works fine for me if I only use it with ES6. - 有人建议将预处理器设置为babel-jest,如果我只使用ES6,它对我来说很好。
These all work. But again, I can't figure out how to combine them
这些所有的工作。但是,我还是搞不懂怎么把它们结合起来
What I've tried
-
I tried my own solution:
我尝试了自己的解决方案:
In
package.json
I have:在包中。json我有:
"jest": { "scriptPreprocessor": "<rootDir>/jest-script-preprocessor", "unmockedModulePathPatterns": [ "<rootDir>/node_modules/react", "<rootDir>/node_modules/react-dom", "<rootDir>/node_modules/react-addons-test-utils", "<rootDir>/node_modules/fbjs" ], "testFileExtensions": ["coffee", "cjsx", "js", "jsx"], "moduleFileExtensions": ["coffee", "cjsx", "js", "jsx"] }
In
jest-script-preprocessor.js
, I have:在jest-script-preprocessor。js,我:
var coffee = require('coffee-react'); var transform = require('coffee-react-transform'); var babelJest = require("babel-jest"); module.exports = { process: function(src, path) { if (coffee.helpers.isCoffee(path)) { console.log(path); return coffee.compile(transform(src), { 'bare': true }); } else { console.log(path); return babelJest.process(src, { filename: path, stage: 0 }); } } };
If I run a test like
npm test __tests__/sometest.jsx
, it loads the ES6 test file fine. That test file will import the module under test, which is also ES6, and THAT'S where it blows up. It simply saysUnexpected reserved word
as soon as it hits an ES6-only syntax, likeimport
,export
, etc. There is no additional line information, but I know it's ES6 that causes the problem because if I change the module under test to be ONLYexport default 'mystring'
, it blows up, and if I change it to non-ES6 syntax likevar q = 5 + 5; module.exports = q;
, it imports the module fine. (Of course, that's not really a testable module, but it doesn't need to be for this proof-of-concept.)如果我运行一个测试,如npm测试__tests__/sometest。jsx,它可以很好地加载ES6测试文件。该测试文件将导入正在测试的模块,也就是ES6,这就是它的爆发点。它只是说意想不到的保留字就会变一个ES6-only语法,进口,出口,等等。没有额外的行信息,但是我知道这是ES6导致问题,因为如果我改变被测模块只有出口mystring的违约,它炸毁,如果我改变它non-ES6语法像var q = 5 + 5;模块。导出= q,导入模块罚款。(当然,这并不是一个真正可测试的模块,但它不需要用于这个概念验证。)
Note the
console.log()
lines in there. I never see them. So one reason this has been so tricky to track down is I can't put any of my own debug logic in. I'm sure these lines run, because if I throw in some random syntax on those lines, it'll choke. But no console output.注意其中的console.log()行。我从来没有看到他们。因此,跟踪这一问题如此棘手的一个原因是,我不能在其中放入任何我自己的调试逻辑。我确信这些行会运行,因为如果我在这些行中加入一些随机的语法,它就会阻塞。但是没有控制台输出。
- I've tried jest-webpack-alias, which is officially recommended by jest, and it sounds great in theory: you use jest with webpack, which then allows you to use whatever preprocessors you've already set up. It gives me the same error of
Unexpected reserved word
. I wrote up an issue on their github repo. - 我尝试过jest-webpack-alias,这是jest正式推荐的,而且它在理论上听起来很不错:您可以在webpack中使用jest,它允许您使用您已经设置好的任何预处理器。它给了我同样的错误,意想不到的保留词。我写了一篇关于github回购的文章。
Notes
- I found jestpack, but I don't want to use it as it requires Node >= 5, and I want to use Node 4.2.3. It also doesn't work with Jest >= 0.8, and I want to use Jest 0.8, as it's currently the latest and I assume has the best chance of being in sync with the live docs and react version (0.14.6).
- 我找到了jestpack,但是我不想使用它,因为它需要节点>= 5,我想使用节点4.2.3。它也不能使用Jest >= 0.8,我想使用Jest 0.8,因为它是最新的,我认为它有最好的机会与live docs和react版本同步(0.14.6)。
1 个解决方案
#1
0
Here's what I'm doing that's working for me.
这就是我正在做的对我有用的事情。
npm install --save-dev babel-jest
npm install --save-dev coffee-react
In package.json
:
在package.json:
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/."
],
"testFileExtensions": ["coffee", "cjsx", "js", "jsx"],
"moduleFileExtensions": ["coffee", "cjsx", "js", "jsx"]
}
Take note of the unmockedModulePathPatterns
. I set it to match everything in node_modules
. You might not want that, but if you start getting errors like Error: Failed to get mock metadata:...
, consider it, as recommended here.
注意下unmockedModulePathPatterns。我将它设置为匹配node_modules中的所有内容。您可能不希望这样,但是如果您开始出现错误,比如错误:未能获得模拟元数据:……按照这里的建议,考虑一下。
In jest-script-preprocessor.js
:
在jest-script-preprocessor.js:
var babelJest = require('babel-jest');
var coffee = require('coffee-react');
module.exports = {
process: function(src, filename) {
if (filename.indexOf('node_modules') === -1) {
if (filename.match(/\.coffee|\.cjsx/)) {
src = coffee.compile(src, {bare: true});
} else {
src = babelJest.process(src, filename);
}
}
return src;
}
};
#1
0
Here's what I'm doing that's working for me.
这就是我正在做的对我有用的事情。
npm install --save-dev babel-jest
npm install --save-dev coffee-react
In package.json
:
在package.json:
"jest": {
"scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/."
],
"testFileExtensions": ["coffee", "cjsx", "js", "jsx"],
"moduleFileExtensions": ["coffee", "cjsx", "js", "jsx"]
}
Take note of the unmockedModulePathPatterns
. I set it to match everything in node_modules
. You might not want that, but if you start getting errors like Error: Failed to get mock metadata:...
, consider it, as recommended here.
注意下unmockedModulePathPatterns。我将它设置为匹配node_modules中的所有内容。您可能不希望这样,但是如果您开始出现错误,比如错误:未能获得模拟元数据:……按照这里的建议,考虑一下。
In jest-script-preprocessor.js
:
在jest-script-preprocessor.js:
var babelJest = require('babel-jest');
var coffee = require('coffee-react');
module.exports = {
process: function(src, filename) {
if (filename.indexOf('node_modules') === -1) {
if (filename.match(/\.coffee|\.cjsx/)) {
src = coffee.compile(src, {bare: true});
} else {
src = babelJest.process(src, filename);
}
}
return src;
}
};