Question

我编写了一个简单的React组件，它呈现＆lt; iframe＆gt; ：

＆＃xA;＆＃xA;

 导出类iframe扩展了React。组件{＆＃xA; render（）{＆＃xA; return＆lt; iframe src = {this.props.src} /＆gt ;;＆＃xA; }＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

我尝试通过检查 src 加载的内容来测试它已正确填充＆lt; iframe＆gt; 。＆＃xA;为了做到这一点，我尝试访问 frame.contentWindow ，但在使用Enzyme挂载后它总会返回 undefined 。

＆＃xA;＆＃xA;

我试图用Sinon ＆lt; iframe＆gt; 内容http://sinonjs.org/docs/#fakeServer“rel =”noreferrer“> FakeXMLHttpRequest ：

＆＃xA;＆＃xA;

  server = sinon.fakeServer.create（）;＆＃xA; server.respondWith（'GET'，'test'，[200，{'Content-Type'：'text / html'}，'＆lt;！DOCTYPE html＆gt; ＆lt; html xmlns =“http://www.w3.org/1999/xhtml”＆gt;＆lt; body＆gt;＆lt; div class =“myClass”＆gt; Amazing Unicorn＆lt; / div＆gt;＆lt; / body＆gt;＆lt; / html＆gt;']）;＆＃xA; container = mount（＆lt; iframe src ='test'/＆gt;）;＆＃xA;

＆＃xA;＆＃xA;

并使用 ＆lt; iframe src ='data：text / ht ml'＆gt; ：

＆＃xA;＆＃xA;

  const src ='data：text / html; charset = utf-8，＆lt;！ DOCTYPE html＆gt;＆lt; html xmlns =“http://www.w3.org/1999/xhtml”＆gt;＆lt; body＆gt;＆lt; div class =“myClass”＆gt; Amazing Unicorn＆lt; / div＆gt;＆lt; / body＆gt; ＆lt; / html＆gt;';＆＃xA; container = mount（＆lt; iframe src = {src} /＆gt;）;＆＃xA;

＆＃xA;＆＃xA;

但在两种情况下使用酶测试：

＆＃xA;＆＃xA;

  container = mount（＆lt; iframe src ='...'/＆gt;）;＆＃ xA; container.instance（）。contentWindow // equals'undefined'＆＃xA; container.find（'iframe'）。contentWindow // equals'undefined'＆＃xA;

＆＃xA ;＆＃xA;

当提供有效的 src 属性时，该组件在浏览器上按预期工作和呈现。有没有办法在使用Enzyme（或任何其他测试框架）的React测试中访问 contentWindow ？

＆＃xA;

Answer 1

问题仍然存在。答案是jsdom仅为连接的iframe提供contentWindow / contentDocument，默认情况下ase没有连接节点。有一个安装选项可以引导酶连接节点：

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

Answer 2

如果您正在编写单元测试（我认为这就是您正在做的事情），您应该测试行为，而不是实现细节。

如果我必须为这样的组件编写测试，我会像这样使用smth：

积极情景：组件呈现传递src
否定场景：如果在道具中没有传递src，则组件呈现为null（取决于业务逻辑）

此测试处理两者：正确和错误的行为。有关详细信息，请参阅Defensive programming。

如果我们谈论测试实现，我会使用Jest和toMatchSnapshot方法检查两种情况下的渲染结果。

使用酶

2 个答案: