H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】React中编写的tsx组件,如何导入到js中进行单元测试?看了蚂蚁的源码,还是有点不太明白,进来一起研究下

现在很多项目中前端项目越来越庞大,单元测试是不能缺少的一环。我们工作中也不例外,React中现在大家用的比较多的有jestenzyme
经过一段时间的使用,现在也是拥抱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中进行单元测试的?

  1. 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是可以做到的,到此我们的第二个问题就解决掉了。

回答:

TypeScript有一个关于react的教程,你可以看看那个。里面有关于单元测试的。
https://github.com/Microsoft/…

本文地址:H5W3 » 【前端问题精选】React中编写的tsx组件,如何导入到js中进行单元测试?看了蚂蚁的源码,还是有点不太明白,进来一起研究下

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址