问题描述
我有一些问题,测试使用以ES6编写的Jest(v16.0.1)测试用Typescript(v2.0.3)编写的React组件。 m使用ts-jest(v0.1.8)预处理器,我的package.json的相关部分看起来像
jest :{
scriptPreprocessor:< rootDir> /node_modules/ts-jest/preprocessor.js,
testRegex:(/__tests__/.*|\\.(test | | |
ts,
tsx,
js
}
但是当我运行测试我得到: / p>
FAIL应用程序/组件/ __测试__ / TestTotalNumberOfTeapots.js
●测试套件无法运行
/Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
({Object。< anonymous>:function(module,exports,require,__ dirname,__ filename,global, jest){import反应的反应;
^^^^^
SyntaxError:意外的令牌导入
在transformAndBuildScript(node_modules / jest-runtime / build / transform.js:284:10)
测试套件:1失败,1总共
测试:0总计
快照:0总计
时间:0.673s
所有测试套件。
我的测试看起来像
import反应的反应;
import来自'../TotalNumberOfTeapots.tsx'的TotalNumberOfTeapots;
来自'react-test-renderer'的import renderer;
它('正确渲染',()=> {
const tree = renderer.create(
< TotalNumberOfTeapots numberOfTeapots ='1'/>
).toJSON();
expect(tree).toMatchSnapshot();
});
我想我需要一个设置,我的组件从Typescript到ES5使用ts-jest在Jest读取之前,我的测试从ES6到ES5都是透露出来的,但我不知道怎么样?
管理这个工作,需要编写自己的预处理器:
const tsc = require('typescript');
const babelJest = require('babel-jest');
module.exports = {
process(src,path){
if(path.endsWith('。ts')|| path.endsWith('。tsx') ){
return tsc.transpile(
src,
{
module:tsc.ModuleKind.CommonJS,
jsx:tsc.JsxEmit.React,
},
路径,
[]
);
}
if(path.endsWith('。js')|| path.endsWith('。jsx')){
return babelJest.process(src,path);
}
return src;
},
};
并将我的package.json更新为:
jest:{
scriptPreprocessor:preprocessor.js,
moduleFileExtensions:[js,jsx,json ,ts,tsx]
},
I'm having some issues testing a React component written in Typescript(v2.0.3) with Jest(v16.0.1) tests written in ES6.
I'm using the ts-jest(v0.1.8) preprocessor and the relevant part of my package.json looks like
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/ts-jest/preprocessor.js",
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
But when I run the tests I get:
FAIL app/components/__tests__/TestTotalNumberOfTeapots.js
● Test suite failed to run
/Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 0.673s
Ran all test suites.
My test looks like
import React from 'react';
import TotalNumberOfTeapots from '../TotalNumberOfTeapots.tsx';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<TotalNumberOfTeapots numberOfTeapots='1' />
).toJSON();
expect(tree).toMatchSnapshot();
});
I assume I need to have a setup where my components are transpiled from Typescript to ES5 using ts-jest and my tests are transpiled from ES6 to ES5 using babel-jest before Jest reads them but I'm not sure how?
Managed to work this out, needed to write my own preprocessor:
const tsc = require('typescript');
const babelJest = require('babel-jest');
module.exports = {
process(src, path) {
if (path.endsWith('.ts') || path.endsWith('.tsx')) {
return tsc.transpile(
src,
{
module: tsc.ModuleKind.CommonJS,
jsx: tsc.JsxEmit.React,
},
path,
[]
);
}
if (path.endsWith('.js') || path.endsWith('.jsx')) {
return babelJest.process(src, path);
}
return src;
},
};
And update my package.json to have:
"jest": {
"scriptPreprocessor": "preprocessor.js",
"moduleFileExtensions": ["js", "jsx", "json", "ts", "tsx"]
},
这篇关于用React,Typescript和ES6进行Jest测试的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!