13

我是 reactJS 的新手，并尝试学习如何使用它进行测试。我遇到了以下测试实用程序方法。但是我不断收到同样的错误message:ReferenceError: document is not defined。

渲染文档

ReactComponent renderIntoDocument(
  ReactElement instance
)

将组件渲染到文档中分离的 DOM 节点中。这个函数需要一个 DOM。

注意：在导入 React 之前，您需要使 window、window.document 和 window.document.createElement 全局可用。否则 React 会认为它无法访问 DOM，并且像 setState 这样的方法将不起作用。

我知道它丢失 DOM 失败的原因，但是我如何插入 DOM 或需要它？

我的测试如下：

import expect from 'expect.js';
import React from 'react';
import Header from '../../components/header';
import {renderShallow} from './help';
import ReactAddOn from 'react/addons';

var TestUtils = ReactAddOn.addons.TestUtils;

describe('Test react', function() {
  let component;

  beforeEach(()=>{
    component = TestUtils.renderIntoDocument(<Header></Header>);
  });


  it('Test if the content been correclty render', function() {
    console.log(component);
  });
});
4

2 回答 2

13

tl;博士; 你需要jsdom+ Mocha。

根据规范ReactTestUtils#renderIntoDocument，

renderIntoDocument() 需要一个 DOM：

在你导入 React 之前，你需要使 window、window.document 和 window.document.createElement 全局可用。否则 React 会认为它无法访问 DOM，并且像 setState 这样的方法将不起作用。

传统上，React 中的单元测试是使用 来完成的Jest，它显然包含 DOM 支持。而Mocha没有。

要理解这一点，请考虑这个过度简化的类比Jest= Mocha+ jsdom。

jsdom是用 JavaScript 实现的，我们可以在不需要浏览器的情况下使用类似 DOM 的 API。这意味着我们不必为了测试而捕获浏览器，例如Karma（这就是它在您使用的那一刻起作用的原因Karma）。因此，我们可以在没有浏览器的环境中运行我们的测试，例如在 Node 或持续集成环境中。

参考：

  1. 教程：在 Jsdom 上测试 React
  2. React 规范：ReactTestUtils#renderIntoDocument
  3. 信息：如何开玩笑
  4. 信息：react-testing-mocha-jsdom
于 2015-11-25T10:42:31.057 回答
2

你需要一个 DOM。幸运的是，jsdomify可以轻松地将 DOM 附加到 Node.js 中的全局变量。

假设我们有一个简单的组件：

var React = require('react');
module.exports = React.createClass({
  displayName: 'Foo',

  componentDidMount: function() {
    console.log('componentDidMount called');
  },
  render: function() {
    return (
      <p>hello world</p>
    );
  }
});

我们可以用renderIntoDocument. 这是使用磁带的示例：

var jsdomify = require('jsdomify').default;
// We don't want to require React until we've set up the DOM
// (see the jsdomify docs).
var React;

var test = require('tape');

test('Render a Foo component with full react lifecycle', function (t) {
  jsdomify.create();
  React = require('react');

  var Foo = require('../Foo.jsx');

  // Full render to trigger componentDidMount.
  var ReactTestUtils = require('react-addons-test-utils');
  var renderer = ReactTestUtils.renderIntoDocument(<Foo/>);
  var result = renderer.render();

  // Cleans up global variables inserted by jsdomify.create.
  jsdomify.destroy();

  t.equal(result.props.children, 'hello world');
  t.end();
});
于 2016-08-09T20:23:13.593 回答