gpt4 book ai didi

javascript - 使用 Enzyme 测试 React 组件中 <iframe> 的内容

转载 作者:可可西里 更新时间:2023-11-01 02:49:00 25 4
gpt4 key购买 nike

我编写了一个简单的 React 组件来呈现 <iframe> :

export class Iframe extends React.component {
render() {
return <iframe src={ this.props.src } />;
}
}

我试图通过检查加载的内容 src 来测试它正确填充在 <iframe> 中.为此,我尝试访问 frame.contentWindow , 但在用 enzyme 安装它之后它总是返回 undefined .

我试过模拟 <iframe>内容与诗浓 FakeXMLHttpRequest :

server = sinon.fakeServer.create();
server.respondWith('GET', 'test', [200, { 'Content-Type': 'text/html' }, '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>']);
container = mount(<Iframe src='test' />);

<iframe src='data:text/html' > :

const src = 'data:text/html;charset=utf-8,<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><body><div class="myClass">Amazing Unicorn</div></body></html>';
container = mount(<Iframe src={ src } />);

但在这两种情况下都使用 enzyme 进行测试:

container = mount(<Iframe src='...' />);
container.instance().contentWindow // equals 'undefined'
container.find('iframe').contentWindow // equals 'undefined'

当提供有效的 src 时,该组件可以在浏览器上按预期工作和呈现。属性。有没有办法访问contentWindow在使用 Enzyme(或任何其他测试框架)进行 React 测试时?

最佳答案

问题仍然存在。答案是 jsdom 只为附加的 iframe 提供 contentWindow/contentDocument,默认情况下 enzyme 不附加节点。有一个 mount 选项可以指示 enzyme 附加节点:

el = document.createElement('div');
document.body.appendChild(el);
wrapper = mount(<MyReactNode />, { attachTo: el });

关于javascript - 使用 Enzyme 测试 React 组件中 &lt;iframe&gt; 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41447842/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com