I've written a simple React ponent that renders an <iframe>:
export class Iframe extends Reactponent {
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=""><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=""><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 ponent 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)?
I've written a simple React ponent that renders an <iframe>:
export class Iframe extends React.ponent {
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/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/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 ponent 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)?
- I am having the same issue to test it, did you find a solution? – Weslley Araujo Commented Feb 6, 2017 at 12:39
- 6 You would have to setup enzyme with a "working" browser. Don't know if that is possible. However, why should you want to test this? IMHO this test is pointless as you would not test your code but react. I think you should just test if the prop "src" is passed down correctly as the iframe's "src" attribute which is possible with enzyme. – lipp Commented Oct 17, 2017 at 13:42
- contentWindow will be actually null not undefined, after you getDOMNode() and check property contentWindow. what you checked is property contentWindow on enzyme wrapper not iframe itself – maciejW Commented Feb 14, 2018 at 4:15
2 Answers
Reset to default 2The 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 ponent I'd use smth like that:
- positive scenario: ponent renders an iframe with passed
src - negative scenario: ponent renders null (depends on business logic) if no
srcpassed in props
This 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.