TDD Browserify 和 ReactJS答案

【问题标题】：TDD Browserify and ReactJSTDD Browserify 和 ReactJS
【发布时间】：2014-08-20 07:10:04
【问题描述】：

我正在努力寻找一种好的、干净的方式来测试 React 组件。我喜欢mochify 的想法，因为它看起来可以抽象出很多测试运行者的麻烦，可以与 webdriver/saucelabs 等一起使用。

问题是我在命令行中使用 Browserify 对 jsx、coffee、less 等进行各种转换。并且找不到如何让 mochify 运行这些转换。

我该怎么做？

或者有更好的选择吗...Karma 也许？

谢谢

【问题讨论】：

你考虑过使用 gulp 来组织任务吗？你可以设置一个 browserify 构建，然后使用 gulp-mocha-phantomjs 之类的东西自动运行 mocha 测试。
是的。我在其他项目中大量使用了 grunt 和 gulp。试图在这个上保持简单。但这可能是最简单的方法。
我确实尝试过 JSPM，它运行良好。在我的博客文章中详细解释了如何设置和使用 TDD 和 react undefinednull.com/2015/05/03/…

标签： mocha.js reactjs browserify

【解决方案1】：

Browserify 转换也可以在package.json 中指定，例如：

...
"devDependencies": {
  "browserify": "*",
  "coffeeify": "^0.6.0",
  "mocha": "*",
  "mochify": "*",
  "reactify": "^0.13.1"
},
"browserify": {
  "transform": [
    "coffeeify",
    "reactify"
  ]
},
...

在您的测试文件中，只需要使用相对路径的实际组件文件，并像通常使用 mocha 一样编写测试：

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var MyComponent = require('../src/app/MyComponent');
...

【讨论】：

【解决方案2】：

编辑： Mochify 现在支持带有--transform 和--plugin 的其他转换和插件。

此问题将在 Mochify 的未来版本中解决。

请务必关注the issue on GitHub。

【讨论】：