我可以使用 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 mongoose mocha:如何在我的测试中处理 Promise.reject
在我的 node.js 应用程序中使用 mongodb 和 mongoose 在 Mocha 和 Chai 上运行测试后无法清除数据库