• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

用户头像
it1352
帮助1

问题说明

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

正确答案

#1

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /reply/detail/tanhecghfa
系列文章
更多 icon
同类精品
更多 icon
继续加载