使用 React、Typescript 和 ES6 进行 Jest 测试
Posted
技术标签:
【中文标题】使用 React、Typescript 和 ES6 进行 Jest 测试【英文标题】:Jest testing with React, Typescript and ES6 【发布时间】:2017-02-25 11:05:19 【问题描述】:我在使用 ES6 编写的 Jest(v16.0.1) 测试用 Typescript(v2.0.3) 编写的 React 组件时遇到了一些问题。
我正在使用 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();
);
我假设我需要有一个设置,其中我的组件使用 ts-jest 从 Typescript 转译到 ES5,我的测试在 Jest 读取它们之前使用 babel-jest 从 ES6 转译到 ES5,但我不确定如何?
【问题讨论】:
现在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"]
,
【讨论】:
遇到“Not Found preprocessor.js”,改成"scriptPreprocessor": "./preprocessor.js"
@ObooChin 你必须在你的package.json
旁边创建preprocessor.js
文件以上是关于使用 React、Typescript 和 ES6 进行 Jest 测试的主要内容,如果未能解决你的问题,请参考以下文章
Jest Manual Mocks with React 和 Typescript:模拟 ES6 类依赖
如何使用 ReactDOM 直接渲染 React 组件(ES6 API)?
使用带有 TypeScript 的 React Native 找不到变量 Symbol