Menu
I've written a simple React component that renders an <iframe>:
export class Iframe extends React.component {
render() {
return <iframe src={ this.props.src } />;
}
}
and I trying to test it by checking that the content loaded with src is properly populated within the <iframe>.
In order to do so I try to access frame.contentWindow, but after mounting it with Enzyme it always returns undefined.
I've tried to mock the <iframe> content with 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' />);
and with <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 } />);
but in both cases on the test with Enzyme:
container = mount(<Iframe src='...' />);
container.instance().contentWindow // equals 'undefined'
container.find('iframe').contentWindow // equals 'undefined'
The component works and renders as expected on the browser when provided with a valid src attribute. Is there any way to access contentWindow in React tests with Enzyme (or any other test framework)?
295
To check if iframe is loaded or it has a content with JavaScript, we can set the iframe's onload property to a function that runs when the iframe is loaded. document. querySelector("iframe"). onload = () => { console.
To set the content of an iframe of a React component, we can set the srcDoc prop of the iframe element. to set the srcDoc prop to the HTML string that we want to display as the iframe's content. Therefore, we should see 'Hello World' displayed inside the iframe.
You can install and use React Testing Library alongside Enzyme, so if you already have a suite of Enzyme tests you can easily create new tests in RTL and keep your existing Enzyme tests.
In React, developers use iframes to create either a sandboxed component or an application that is isolated from its parent component. In an iframe, when a piece of content is embedded from an external source, it is completely controlled by the source instead of the website it is embedded in.
The problem is still actual. And the answer is that jsdom provides contentWindow/contentDocument only for attached iframe, and enzyme by default doesn't attach nodes. There is option for mount which directs enzyme to attach node:
el = document.createElement('div');
document.body.appendChild(el);
wrapper = mount(<MyReactNode />, { attachTo: el });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
