由于需要DOM,使用reactjs renderIntoDocument进行的测试保持失败
问题说明
我是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.
参考文献:
- Tutorial: Testing React on Jsdom
- React Spec: ReactTestUtils#renderIntoDocument
- Information: How to Jest
- Information: react-testing-mocha-jsdom
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhecghfa
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20 -
复制文件夹/文件而不修改属性?
it1352 07-15 -
Android微调工具-删除当前选择
it1352 06-20