3

我一直在研究在 TypeScript 中开发基于 React 的组件的良好工作流程。

从 1.6 开始，TypeScript 通过扩展在 TypeScript 文件中原生支持 JSX，.tsx并且tsd我们可以获得 IDE (atom/WebStorm) 来支持类型检查。

但是，似乎没有一种简单的方法来测试用tsx.

你能分享你对此的见解吗？

我正在考虑（几乎不得不使用）Jest而不是 pure Jasmine，因为Jest的运行时环境带有 DOM。但是，jest 似乎仅适用于 ES2015 throughbabel和es2015, react预设。有没有现成的方法可以Jest使用tsx？

目前，我可以测试用 ES2015 编写的 React 组件，例如：

// SampleComponent.js

import React from 'react';

class SampleComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (<div className='container'>Hello World!</div>);
  }
}

module.exports = SampleComponent;

相应的测试可能如下所示：

// __tests__/SampleComponent-test.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';

const SampleComponent = require('../SampleComponent');

describe('SampleComponent', ()=>{
  it("has some text", ()=>{

    const result = TestUtils.renderIntoDocument(
      <SampleComponent />
    );

    const sampleComponentNode = ReactDOM.findDOMNode(result);

    // expect statements

  });
});

这很好用，但是如果我们用 , 替换.js扩展名.tsx并将其更改scriptPreprocessor为：

'use strict';

var ts = require('typescript');

module.exports = {
  process: function(src, path) {
    if (path.match(/\.(ts|tsx)$/) && !path.match(/\.d\.ts$/)) {
      return ts.transpile(src, {jsx: ts.JsxEmit.React, module: ts.ModuleKind.CommonJS});
    }
    return src;
  },
};

一切都乱套了，尤其是关于 TypeScript 处理模块加载的方式

4

1 回答 1

0

经过探索，我得出了一个很好的暂定解决方案，特别是如果您的项目react与其他框架集成。

这个解决方案确实需要复杂的模块加载样板（我害怕前端项目）。我认为这种方法将持续到 ES6 模块加载成为标准。

暂定解决方案

测试赛跑者

业力

浏览器

phantomjs（因此它可以在 CI 服务器中轻松使用）

引擎

茉莉花

转译器

tsc 与--jsx react或 {"jsx": "react"}在tsconfig.json

使用库进行测试（例如角度模拟）

像这样加载它们karma2.conf.js：

// list of files / patterns to load in the browser
    files: [
        // bind-polyfill helps phantomjs acquire the Function.prototype.bind function
        './node_modules/phantomjs-polyfill/bind-polyfill.js',
        "bower_components/jquery/dist/jquery.js",
        "bower_components/angular/angular.js",
        "bower_components/react/react-with-addons.js",
        "bower_components/react/react-dom.js",
        "bower_components/angular-mocks/angular-mocks.js",
        'src/**/*.js'
    ],

将所有 TS 文件编译为 ES5，不要export符号

通过不从文件中导出符号.ts，.tsx编译后的js文件可以简单地通过karma2.conf.js如上所示加载。

为什么是phantomjs？

它有一个 DOM，允许你渲染和操作react组件。Facebook 自己的测试框架：Jest提供相同的好处（与其他一些框架一样）。

缺点

由于karma使用浏览器并且文件以类似于传统网站的方式加载，因此可能很难加载不用于后端的代码（即不能通过 Bower 获得）。例如，react TestUtils我被迫使用 Phantom 提供的 jQuery + real DOM 而不是使用。

生产

正如 Louy 在评论中提到的，可以使用 webpack 或任何一种标准任务运行器

于 2015-12-21T19:20:41.093 回答