現(xiàn)在很多項(xiàng)目中前端項(xiàng)目越來(lái)越龐大，單元測(cè)試是不能缺少的一環(huán)。我們工作中也不例外，React中現(xiàn)在大家用的比較多的有jest、enzyme。
經(jīng)過(guò)一段時(shí)間的使用，現(xiàn)在也是擁抱TypeScript了，接口約定比原來(lái)的JavaScript更加簡(jiǎn)潔清除了。但隨之而來(lái)的問(wèn)題也不少，通常我們編寫(xiě)TSX文件，引入React是用的默認(rèn)方式：

//Regular imports
import * as React from 'react';

//Synthetic default imports:
import React from 'react';

按官方的說(shuō)法第二種是動(dòng)態(tài)導(dǎo)入，我們通常用斷言的方式，也就是第一種引入React?？次浵伒脑创a是用的第二種方式引入的，

"@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"

我想他們是通過(guò)typescript-babel-jest ,babel-jest的方式可以這么直接導(dǎo)入的？在github上并沒(méi)有找到過(guò)多關(guān)于這方式的解釋，誰(shuí)搞過(guò)這個(gè)嗎？我準(zhǔn)備翻翻babel看看怎么搞~~~

第二個(gè)問(wèn)題是，tsx編寫(xiě)的組件，是如何支持導(dǎo)入test.js中進(jìn)行單元測(cè)試的？

1. tsx 導(dǎo)入js文件的時(shí)候js，編譯階段沒(méi)有報(bào)錯(cuò)，同樣是直接的import進(jìn)去的

//index.test.js
import React from 'react';
import TestUtils from 'react-dom/test-utils';
import { Col, Row } from '..'; //看過(guò)antd源碼的會(huì)知道，這兩個(gè)是tsx編寫(xiě)的組件

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、第二個(gè)他們要解決的問(wèn)題就是tsx轉(zhuǎn)換為js，進(jìn)行單元測(cè)試吧、他們是如何轉(zhuǎn)換的呢？