我可以使用 mocha 在我的 ecmascript-6 应用程序中对 react-templates 进行单元测试吗？答案

【问题标题】：Can I use mocha to unit test react-templates in my ecmascript-6 app?我可以使用 mocha 在我的 ecmascript-6 应用程序中对 react-templates 进行单元测试吗？
【发布时间】：2016-06-26 04:29:29
【问题描述】：

我在一个 ecmascript-6 应用程序中用 react-templates 替换了我所有的 React jsx。我真的很喜欢将 html 模板放在专用的 .rt 文件中，而不是与 es6 代码混在一起； jsx 似乎是错误的。

我在开发中使用 webpack-dev-server。我必须在 preLoader 步骤中将 .rt 转换为 es6 才能使其正常工作，然后常规的 es6-to-commonjs babel 加载器对结果进行操作。 Webpack 在开发和生产中运行良好。 webpack -p 将所有内容编译并缩小为用于生产构建的 commonjs 块。到目前为止还不错。

这是我在 webpack.config.js 中的功能模块加载器配置：

...
  module: {
    preLoaders: [{
      test: /\.rt$/,
      loader: 'react-templates?modules=es6'
    }],
    loaders: [{
      test: /\.jsx?$|\.rt$/,
      loader: 'babel'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('style', ['css', 'sass?sourceMap'])
    }]
  },
...

这就是麻烦的开始——我曾使用 jsx 组件进行 mocha 单元测试，但现在我使用 react-templates 似乎无法运行相同的单元测试。

Mocha 将使用特殊的 --compiler 将 es6 js 编译为 commonjs，但我唯一能找到的 react 模板和 mocha 是一个模块 mocha-react-templates-compiler，它被硬编码以将模板直接转换为 commonjs，而不是 es6 .

所以，在我的 es6 中这样的行：

import MyComponentRT from './MyComponent.rt'

在开发和生产中表现出色，但在 mocha 测试中不工作。

我试过了：

mocha --recursive --compilers rt:mocha-react-templates-compiler,js:babel-register ./js/test

但我得到的错误与 es6 代码明显相关，期望 rt 文件也是 es6。颠倒编译器顺序没有帮助。

还有其他人在同一个项目中使用 react-templates 和 es6 和 mocha 吗？你是如何让 mocha 测试运行的？

【问题讨论】：

标签： reactjs ecmascript-6 mocha.js react-templates

【解决方案1】：

我最终用 gulp 解决了这个问题。

我使用 gulp 将 .rt 文件显式编译为 es6，然后将 es6 编译为 .rt.js，类似于 webpack 的配置。所有输出文件都被转储到一个临时的“testbuild”文件夹中，然后对 .js 文件执行相同的操作，mocha 可以从那里运行测试。

gulpfile.js：

var gulp = require('gulp');
var clean = require('gulp-clean');
var rt = require('gulp-react-templates');
var babel = require('gulp-babel');

var testbuild_dir = 'testbuild';

gulp.task('clean', function() {
  return gulp.src(testbuild_dir, {read:false}).pipe(clean());
});

gulp.task('buildrt', ['clean'], function() {
  return gulp.src('src/js/**/*.rt')
    .pipe(rt({modules: 'es6'}))
    .pipe(babel({presets: ['es2015']}))
    .pipe(gulp.dest(testbuild_dir));
});

gulp.task('buildjs', ['buildrt'], function() {
  return gulp.src('src/js/**/*.js')
    .pipe(babel({presets: ['es2015','react']}))
    .pipe(gulp.dest(testbuild_dir));
});

gulp.task('testbuild', ['buildjs']);

package.json 脚本：

  "scripts": {
    "dev": "webpack-dev-server --content-base /build --inline --devtool source-map --host 0.0.0.0",
    "build": "webpack -p",
    "test": "npm run testbuild && npm run testartifacts && npm run testclean",
    "testbuild": "gulp testbuild",
    "testartifacts": "mocha --recursive ./testbuild/js/test",
    "testclean": "gulp clean"
  },

现在我可以运行 npm run test 并且一切正常！

【讨论】：