Question

我是reactSS的新手，并尝试学习如何使用它进行测试。我有以下测试util方法。但是我一直得到同样的错误message:ReferenceError: document is not defined。

renderIntoDocument

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);
  });
});

Answer 1

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或持续集成环境中。

参考文献：

教程：Testing React on Jsdom
React Spec：ReactTestUtils#renderIntoDocument
信息：How to Jest
信息：react-testing-mocha-jsdom

Answer 2

你需要一个DOM。幸运的是，jsdomify可以很容易地将DOM附加到Node中的全局变量。

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

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();
});

使用reactjs进行测试renderIntoDocument由于所需的DOM而保持失败

2 个答案: