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

Question

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

Axe*_*ect 11 javascript iframe sinon reactjs enzyme

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

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

Run Code Online (Sandbox Code Playgroud)

我试图通过检查加载的内容src是否正确填充来测试它<iframe>.为了做到这一点,我尝试访问frame.contentWindow,但在用Enzyme安装后它总是返回undefined.

我试图<iframe>用Sinon 模拟内容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' />);

Run Code Online (Sandbox Code Playgroud)

并与<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 } />);

Run Code Online (Sandbox Code Playgroud)

但在两种情况下用酶测试:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Dmi*_*okh -4

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

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

积极的场景：组件渲染一个 iframesrc
src负面场景：如果没有传入 props ，组件将呈现 null（取决于业务逻辑）

该测试处理：正确和不正确的行为。有关更多详细信息，请参阅防御性编程。

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

归档时间：	8 年，11 月前
查看次数：	2486 次
最近记录：	6 年，4 月前