#reactjs #typescript #ecmascript-6 #jestjs
#reactjs #typescript #ecmascript-6 #jestjs
Вопрос:
У меня возникли некоторые проблемы с тестированием компонента React, написанного на Typescript (v2.0.3), с помощью тестов Jest (v16.0.1), написанных на ES6.
Я использую препроцессор ts-jest (v0.1.8), и соответствующая часть моего package.json выглядит следующим образом
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/ts-jest/preprocessor.js",
"testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
]
}
Но когда я запускаю тесты, я получаю:
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.
Мой тест выглядит так
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();
});
Я предполагаю, что мне нужна настройка, при которой мои компоненты переносятся из Typescript в ES5 с помощью ts-jest, а мои тесты переносятся из ES6 в ES5 с помощью babel-jest, прежде чем Jest их прочитает, но я не уверен, как это сделать?
Комментарии:
1. Теперь есть ts-jest , который поставляется с готовым к использованию препроцессором.
Ответ №1:
Удалось разобраться с этим, нужно было написать свой собственный препроцессор:
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;
},
};
И обновите мой package.json, чтобы иметь:
"jest": {
"scriptPreprocessor": "preprocessor.js",
"moduleFileExtensions": ["js", "jsx", "json", "ts", "tsx"]
},
Комментарии:
1. столкнулся с «Не найдено preprocessor.js «, измените его на
"scriptPreprocessor": "./preprocessor.js"
2. @ObooChin вы должны создать
preprocessor.js
файл рядом с вашимpackage.json