由于需要DOM，使用reactjs renderIntoDocument进行的测试保持失败 [英] Test with reactjs renderIntoDocument keep failed due to required DOM

问题描述

我是reactJS的新手，并尝试学习如何对其进行测试.我已经封装了以下测试util方法.但是我一直收到相同的错误message:ReferenceError: document is not defined.

I am new to reactJS and try to learn how to test with it. I have encouter the following testing util method. However i am keep getting the same error message:ReferenceError: document is not defined.

renderIntoDocument

ReactComponent renderIntoDocument(
  ReactElement instance
)

将组件渲染到文档中的分离DOM节点中.此功能需要一个DOM.

Render a component into a detached DOM node in the document. This function requires a DOM.

注意: 在导入React之前，您将需要在全局范围内使用window，window.document和window.document.createElement.否则，React会认为它无法访问DOM，而setState之类的方法将无法正常工作.

Note: 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.

我知道这是缺少DOM的原因，但是我该如何插入DOM或要求它呢?

I know it the reason failing its missing the DOM, but how can i insert the DOM or require it?

我的测试如下:

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

推荐答案

tl; dr; 您需要jsdom + Mocha.

tl;dr; You need jsdom + Mocha.

根据规范 ReactTestUtils#renderIntoDocument ，

renderIntoDocument()需要DOM :

在导入React之前，您需要全局可用的window，window.document和window.document.createElement.否则，React会认为它无法访问DOM，而setState之类的方法将无法正常工作.

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不会.

Traditionally, Unit testing in React is done using Jest, which apparently contains DOM support. And Mocha doesn't.

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

To understand this, consider this overly simplify analogy, Jest = Mocha + jsdom.

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

jsdom is implemented in JavaScript, we can have a DOM-like API to work with without needing a browser. That means that we don’t have to capture a browser in order test, like Karma (which is why it works the moment you use Karma). Hence, we can run our tests in environments without browsers, like in Node or in continuous integration environments.

参考文献:

1. 教程:在Jsdom上测试React
2. 反应规范: ReactTestUtils#renderIntoDocument
3. 信息:如何开玩笑
4. 信息: react-testing-mocha-jsdom

1. Tutorial: Testing React on Jsdom
2. React Spec: ReactTestUtils#renderIntoDocument
3. Information: How to Jest
4. Information: react-testing-mocha-jsdom

这篇关于由于需要DOM，使用reactjs renderIntoDocument进行的测试保持失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！