Javascript 为浏览器的TSX（JSX/React的TypeScript）编写单元测试

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

从1.6开始，TypeScript通过扩展名

.tsx

在TypeScript文件中对JSX提供了本机支持，通过

tsd

我们可以获得IDE（atom/WebStorm）来支持类型检查

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

tsx

编写的React组件

你能分享你对此的见解吗

我正在考虑（几乎不得不使用）

Jest

而不是纯的

Jasmine

，因为

Jest

的运行时环境带有DOM。然而，jest似乎仅通过

babel

和

ES2015，react

预设与ES2015配合使用。

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;

---

所有的麻烦都来了，特别是关于TypeScript处理模块加载的方式，在探索之后，我找到了一个暂定的解决方案，特别是当您的项目将

react

与其他框架集成时

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

暂定方案 测试运行器 业力

浏览器 phantomjs（因此它可以在CI服务器中随时可用）

引擎 茉莉花

运输机 在

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，不要导出符号 通过不从

.ts

和

.tsx

文件导出符号，可以通过

karma2.conf.js

加载编译的

js

文件，如上所示

为什么是幻影？ 它有一个DOM，允许您渲染和操作

react

组件。 Facebook自己的测试框架：

Jest

提供了与其他一些测试框架相同的好处

缺点 由于

karma

使用浏览器，并且文件的加载方式与传统网站类似，因此可能很难加载不适用于后端的代码（即无法通过Bower获得）。例如，我没有使用

react

TestUtils

I，而是被迫使用Phantom提供的jQuery+RealDOM

生产

---

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

您真的需要

脚本预处理器

？你可能还想告诉我你到底犯了什么错误。老实说，我可能把事情复杂化了。但是我收到的错误消息是“React is undefined”，因为我编译的

js

文件并不总是使用与正在使用的库相同的

module

范例。你能尝试编译所有文件（包括测试文件）吗使用

tsc-p.

然后运行生成的js文件？编译TypeScript文件的最佳模块格式是什么？例如，如果我们将其编译为

systemjs

或

commonjs

，并且如果测试依赖于外部库，如

react

或

angular

，那么我们需要编写boiler plate来加载这些依赖项。我想知道是否有一种方法不必这么做。。。可能不会，但这很难。我倾向于使用

commonjs

，但我主要使用nodejs。您可以使用您需要的任何套件。他们（几乎）对我来说都一样。

'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;
  },
};

// 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'
    ],