Question

我有一个不使用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创建此测试是必要的吗？

Answer 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模块，我认为开玩笑并不实用。

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

1 个答案: