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)?
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:
srcsrcpassed 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
toMatchSnapshotmethod to check the rendering result on both scenarios.