reactjs - 由于需要 DOM，使用 Reactjs renderIntoDocument 进行测试保持失败

Question

我是reactJS新手，并尝试学习如何用它进行测试。我遇到了以下测试 util 方法。但是我不断收到相同的错误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);
  });
});

Answer 1

tl；博士； 您需要jsdom + Mocha。

<小时/>

根据规范ReactTestUtils#renderIntoDocument ,

renderIntoDocument() 需要 DOM:

You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.

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

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

jsdom 是用 JavaScript 实现的，我们可以使用类似 DOM 的 API，而无需浏览器。这意味着我们不必像 Karma 那样捕获浏览器来进行测试(这就是为什么它在您使用 Karma 时就起作用)。因此，我们可以在没有浏览器的环境中运行测试，例如在 Node 或持续集成环境中。

<小时/>

引用文献:

1. 教程:Testing React on Jsdom
2. react 规范:ReactTestUtils#renderIntoDocument
3. 信息:How to Jest
4. 信息:react-testing-mocha-jsdom