Test the content of an <iframe> in a React component with Enzyme
Question
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)?
2 answers
solution1
1 2019-08-07 20:21:40
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 });
solution2
-3 2017-12-22 11:10:35
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:
- positive scenario: component renders an iframe with passed
src - negative scenario: component 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.