- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试测试呈现 iframe 并将标记直接注入(inject)该 iframe 的 React 组件。 (我没有尝试在 iframe 中加载 URL。)
该组件实际上在浏览器中工作得很好,但到目前为止为它编写测试似乎是不可能的。我不确定为什么。
这是一个证明失败的简短测试用例。
// Set up DOM
var jsdom = require( 'jsdom' ).jsdom;
global.document = jsdom( '' );
global.window = document.defaultView;
global.navigator = document.defaultView.navigator;
// Prepare React
var ReactTestUtils = require( 'react-addons-test-utils' );
var React = require( 'react' );
var Frame = React.createClass( {
componentDidMount() {
console.log( 'iframe loaded. adding content' );
const iframe = this.refs.iframe;
console.log( 'adding content to', iframe.contentWindow ); // Should not be null
iframe.contentWindow.document.open();
iframe.contentWindow.document.write( 'Hello World!' );
iframe.contentWindow.document.close();
},
render() {
console.log( 'rendering iframe' );
return React.createElement( 'iframe', { ref: 'iframe' } );
}
} );
// Render the component
ReactTestUtils.renderIntoDocument( React.createElement( Frame ) );
要运行它,您需要安装以下 npm 包:jsdom、react、react-addons-test-utils。然后,您应该能够使用 Node 运行上述代码。
最佳答案
我非常彻底地测试了您的代码,最终发现问题出在 ReactTestUtils.renderIntoDocument
。
ReactTestUtils.renderIntoDocument
为组件创建一个容器,但不再附加到 DOM,因此 contentWindow
对于 iframe 将为空
元素。如果您阅读了 ReactTestUtils
源代码中的评论,您会注意到他们正在考虑重命名 renderIntoDocument
,因为从技术上讲它不会!看来,解决方案是直接使用 ReactDOM
。
这是来自 ReactTestUtils
来源的一些代码:
var ReactTestUtils = {
renderIntoDocument: function (instance) {
var div = document.createElement('div');
// None of our tests actually require attaching the container to the
// DOM, and doing so creates a mess that we rely on test isolation to
// clean up, so we're going to stop honoring the name of this method
// (and probably rename it eventually) if no problems arise.
// document.documentElement.appendChild(div);
return ReactDOM.render(instance, div);
},
}
将 ReactDOM
与您的测试用例一起使用:
// Set up DOM
var jsdom = require( 'jsdom' ).jsdom;
global.document = jsdom( '' );
global.window = document.defaultView;
global.navigator = document.defaultView.navigator;
// Prepare React
var ReactTestUtils = require( 'react-addons-test-utils' );
var React = require( 'react' );
var ReactDOM = require('react-dom')
var Frame = React.createClass( {
componentDidMount() {
console.log( 'iframe loaded. adding content' );
const iframe = this.refs.iframe;
console.log( 'adding content to', iframe.contentWindow ); // Should not be null
iframe.contentWindow.document.open();
iframe.contentWindow.document.write( 'Hello World!' );
iframe.contentWindow.document.close();
// Should log "Hello World!"
console.log(iframe.contentWindow.document.body.innerHTML);
},
render() {
console.log( 'rendering iframe' );
return React.createElement( 'iframe', { ref: 'iframe' } );
}
} );
// Render the component
// NOPE
//ReactTestUtils.renderIntoDocument( React.createElement( Frame ) );
// YUP
ReactDOM.render(React.createElement(Frame), document.body)
很遗憾 ReactTestUtils
的文档中没有提到这一点。
关于javascript - 为什么使用 ReactTestUtils 将 iframe 渲染到 jsdom 中不提供 contentWindow?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36024664/
我开始学习 React,在做一些测试时我注意到两条警告消息: Warning: ReactTestUtils has been moved to react-dom/test-utils. Updat
我得到了一些意想不到的 ReactTestUtils 测试结果。这是代码: 来源: var React = require('react'); module.exports = React.creat
在reactjs docs对于模拟: Simulate has a method for every event that React understands. 我对 ReactJS 还很陌生,所以我
例子如下: http://jsfiddle.net/hulufei/twr4thuh/7/ 它只是在虚拟 dom 中绑定(bind) onClick 时起作用(如第 18 行),但是如果我注释掉第 1
我在 React 表单中有一个 HTML5 文件类型输入,类似于以下内容 文件上传后,this.onChange 访问所选文件,验证它们并转换表单。 我试图弄清楚如何使用 ReactTestUtil
下面这段代码是用 typescript 写的,它使用了“react-dom/test-utils”中的 ReactTestUtils。 let nameInput = TestUtilsExtende
用于 react 测试的 enzyme 、ReactTestUtils和react-testing-library之间有什么区别? ReactTestUtils 文档说: ReactTestUtils
尝试使用 Karma+Jasmine 测试 React 组件,我正在尝试检查是否调用了 onClick 处理程序中的所有函数,但测试返回错误结果: `Expected spy reportLoginW
我正在尝试使用 ReactTestUtils 为 React Native 项目设置单元测试但是,我在运行 npm test 时收到此错误: Cannot find module 'react/lib
我正在尝试测试呈现 iframe 并将标记直接注入(inject)该 iframe 的 React 组件。 (我没有尝试在 iframe 中加载 URL。) 该组件实际上在浏览器中工作得很好,但到目前
我在我的测试中渲染了一个组件: component = TestUtils.renderIntoDocument( foo foo foo ); $bodyElem
我有一个 React 项目,正在尝试设置一些测试 由于以下设置指南/问题: https://github.com/facebook/jest/issues/1353 , https://github.
我是一名优秀的程序员,十分优秀!