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

Posted

技术标签:

【中文标题】我可以使用 mocha 在我的 ecmascript-6 应用程序中对 react-templates 进行单元测试吗?【英文标题】:Can I use mocha to unit test react-templates in my ecmascript-6 app? 【发布时间】: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 测试运行的?

【问题讨论】:

【参考方案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 并且一切正常!

【讨论】:

以上是关于我可以使用 mocha 在我的 ecmascript-6 应用程序中对 react-templates 进行单元测试吗?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Node、Mocha 获取代码覆盖率信息

带有 mocha 的节点检查器无法使用“调试器”命令

node mongoose mocha:如何在我的测试中处理 Promise.reject

使用 Mocha 和伊斯坦布尔生成覆盖范围

Mocha 在运行测试之前似乎没有等待承诺链完成

在我的 node.js 应用程序中使用 mongodb 和 mongoose 在 Mocha 和 Chai 上运行测试后无法清除数据库