Menu
I want to test content of the iFrame Tag using jest.
For e.g I have a small html file that shows google homepage in iframe.
I want to test that google homepage is coming in iFrame or not.
<!DOCTYPE html>
<html>
<body>
<h2>Google</h2>
<iframe src="http://www.google.com" style="border:none;"></iframe>
</body>
</html>
can someone suggest me that how can I test that iframe using jest ?
Thanks in Advance.
673
const fs = require('fs');
const path = require('path');
const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); //--> get the file content
describe('Iframe Test Suit', function () {
beforeEach(() => {
document.body.innerHTML = html.toString();
});
it('Should load iframe content', function (done) {
const iframe = document.querySelector("iframe"); //--> get the iframe element
expect(iframe).toBeTruthy();
onLoad();
function onLoad() {
const iframeContent = iframe.contentDocument || iframe.contentWindow.document;
if (iframeContent.readyState == "complete") {
const input = iframeContent.querySelector("input");
expect(input).toBeTruthy();
done();
} else {
setTimeout(() => onLoad(), 100); //--> call again if iframe content is not loaded
}
}
});
});
By default, jsdom will not load any sub-resources like iframes. To load such resources you can pass the resources: "usable" option, which will load all usable resources.
jest.config.js
"testEnvironmentOptions": { "resources": "usable" }
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
