我可以使用摩卡单元测试反应-模板在我的ecmascript-6应用程序？

Question

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

我在开发中使用webpack开发服务器。我必须在一个.rt步骤中将es6转换为es6来实现这个工作，然后常规的ES6到commonjs加载程序对结果进行操作。Webpack在开发和生产方面做得很好。webpack -p将所有东西编译并缩小到一个用于生产构建的通用块中。到目前为止还不错。

下面是我在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组件进行了摩卡单元测试，但现在我使用的是react模板，所以我似乎无法运行相同的单元测试。

摩卡将用一个特殊的编译器将es6 js编译成commonjs，但我唯一能找到的反应模板和Mocha是一个模块mocha react模板-编译器，它是硬编码的，可以直接将模板转换为commonjs，而不是es6。

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

import MyComponentRT from './MyComponent.rt'

在dev和prod方面做得很好，但在摩卡测试中不起作用。

我试过：

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

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

是否还有其他人在同一个项目中使用react模板、es6和mocha？你怎么做摩卡测试的？

Answer 1

最后我喝了一口就解决了这个问题。

我使用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了，一切都正常！