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)?
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're writing a unit test (and I assume that this is what you're doing), you should test the behavior, not the implementation details.
If I had to write a test for such component I'd use smth like that:
srcsrc passed in propsThis test handles both: correct and incorrect behavior. See Defensive programming for more details.
If we're talking about the test implementation, I'd use Jest and toMatchSnapshot method to check the rendering result on both scenarios.