极客观点
项目管理
HarmonyOS
现在很多项目中前端项目越来越庞大，单元测试是不能缺少的一环。我们工作中也不例外，React中现在大家用的比较多的有jest、enzyme。
经过一段时间的使用，现在也是拥抱TypeScript了，接口约定比原来的JavaScript更加简洁清除了。但随之而来的问题也不少，通常我们编写TSX文件，引入React是用的默认方式：
//Regular imports
import * as React from 'react';
//Synthetic default imports:
import React from 'react';按官方的说法第二种是动态导入，我们通常用断言的方式，也就是第一种引入React。看蚂蚁的源码是用的第二种方式引入的，
"@types/react": "^15.0.38",
"@types/react-dom": "~0.14.18",
"antd-demo-jest": "^1.3.0",
"antd-tools": "~1.6.0",
"babel-cli": "^6.18.0",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
"babel-plugin-import": "^1.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"bezier-easing": "^2.0.3",
"bisheng": "^0.24.0",
"bisheng-plugin-antd": "^0.15.0",
"bisheng-plugin-description": "^0.1.1",
"bisheng-plugin-react": "^0.5.0",
"bisheng-plugin-toc": "^0.4.0",
"color-standalone": "^0.11.6",
"cross-env": "^4.0.0",
"css-split-webpack-plugin": "^0.2.3",
"dekko": "^0.2.0",
"delegate": "^3.1.2",
"dora-plugin-upload": "^0.3.1",
"enquire.js": "^2.1.1",
"enzyme": "^2.6.0",
"enzyme-to-json": "^1.3.0",
"eslint": "^3.0.1",
"eslint-config-airbnb": "latest",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.1",
"eslint-plugin-markdown": "~1.0.0-beta.4",
"eslint-plugin-react": "^7.0.1",
"eslint-tinker": "^0.4.0",
"fetch-jsonp": "^1.0.3",
"glob": "^7.1.1",
"jest": "^20.0.4",
"jsonml.js": "^0.1.0",
"lint-staged": "^3.3.1",
"mockdate": "^2.0.1",
"moment-timezone": "^0.5.5",
"pre-commit": "^1.2.2",
"querystring": "^0.2.0",
"rc-queue-anim": "^1.0.1",
"rc-scroll-anim": "^1.0.3",
"rc-tween-one": "^1.1.2",
"react": "^15.0.0",
"react-color": "^2.11.7",
"react-copy-to-clipboard": "^4.0.1",
"react-document-title": "^2.0.1",
"react-dom": "^15.0.0",
"react-github-button": "^0.1.1",
"react-intl": "^2.0.1",
"react-sublime-video": "^0.2.0",
"react-test-renderer": "^15.5.4",
"reqwest": "^2.0.5",
"rimraf": "^2.5.4",
"stylelint": "^7.8.0",
"stylelint-config-standard": "^16.0.0",
"typescript": "~2.3.0",
"typescript-babel-jest": "^1.0.2",
"values.js": "^1.0.3",
"xhr2": "^0.1.3"我想他们是通过typescript-babel-jest ,babel-jest的方式可以这么直接导入的？在github上并没有找到过多关于这方式的解释，谁搞过这个吗？我准备翻翻babel看看怎么搞~~~
第二个问题是，tsx编写的组件，是如何支持导入test.js中进行单元测试的？
tsx 导入js文件的时候js，编译阶段没有报错，同样是直接的import进去的
//index.test.js
import React from 'react';
import TestUtils from 'react-dom/test-utils';
import { Col, Row } from '..'; //看过antd源码的会知道，这两个是tsx编写的组件
describe('Grid', () => {
it('should render Col', () => {
const col = TestUtils.renderIntoDocument(
<Col span="2" />
);
const colNode = TestUtils.findRenderedDOMComponentWithTag(col, 'DIV');
expect(colNode.className).toBe('ant-col-2');
});
it('should render Row', () => {
const row = TestUtils.renderIntoDocument(
<Row />
);
const rowNode = TestUtils.findRenderedDOMComponentWithTag(row, 'DIV');
expect(rowNode.className).toBe('ant-row');
});
});2、第二个他们要解决的问题就是tsx转换为js，进行单元测试吧、他们是如何转换的呢？
研究了一段时间，猜想，不论是用的什么第三方插件，测试环境还是基于nodeJS的，nodejs环境下运行的是什么？最终还是要编译成为js，再去跑测试的。于是我去搜了一下，怎么把tsx、ts文件转为js文件，果然，有一个
typescript-babel-jest是可以做到的，到此我们的第二个问题就解决掉了。