如何在没有 Browserify 的情况下测试 React 组件答案

【问题标题】：How to test React component without Browserify如何在没有 Browserify 的情况下测试 React 组件
【发布时间】：2014-11-17 05:04:48
【问题描述】：

我有一个不使用browserify 工具的反应应用程序。表示React变量是由<head>中调用的react js lib的脚本导出的。

// React variable is already available
var MyComponent = React.createClass({});

在实现这个组件之后，我想为它创建一个测试。我查看了Jest documentation，并创建了我的组件测试。

/** @jsx React.DOM */
jest.dontMock('../compiled_jsx/components/my-component.js');
describe('MyComponent', function() {
it('The variables are being passed to component', function() {
  var React = require('react/addons');

  // In the `MyComponent` import I got the error below: 
  // ReferenceError: /compiled_jsx/components/my-component.js: React is not defined
  var myComponent = require('../compiled_jsx/components/my-component.js'); 
});

在Jest documentation 示例中，组件及其测试都使用require 函数来获取React 变量。

有没有办法将React 变量暴露到组件中？或者是否有必要使用 browserify 来创建这个测试？

【问题讨论】：

标签： javascript reactjs browserify jestjs reactjs-testutils

【解决方案1】：

Jest 在 node.js 中运行，所以你需要使用 commonjs 模块。您不要将 browserify 与玩笑一起使用。如果您真的反对 commonjs 模块，则可以假设每个文件都包含在 iffe 中。

var React = typeof require === 'undefined' 
              ? window.React 
              : require('react/addons');

或者作为测试的第一行，尝试：

global.React = require('react/addons');

无论哪种方式，使用以下方式导出您的组件：

try { module.exports = Foo; } catch (e) { window.Foo = Foo };

就个人而言，如果您不使用 commonjs 模块，我认为玩笑并不实用。

【讨论】：

我没有使用 commonjs 模块，但我使用的是 React，我没有找到比 Jest 更好的方法来测试我的 React 应用程序。我曾考虑过进行try/catch 治疗，但对我来说似乎很难看。我正在寻找一种更好的方法来做到这一点。您推荐哪个测试库而不是 Jest？提前致谢。
Jest 是最好的选择，但是 mocha + react 的 test-utils 应该足够好了。您要么需要使用 karma + phantomjs，要么需要基于浏览器的测试运行器（我认为 mocha 有一个）。
好的。我认为更好地调整我的应用程序以使用 commonjs 模块。谢谢@FakeRainBrigand