Jsdom load javascript code but doesn't run correctly

Question

What is wrong with this code? It displays the says: hello bar from the out.js console.log but does not run the rest of the script doesn't add the link inside <div id="link"></div>

If I put the script directly in the code it works, but not in a .js file

teste2.js

const jsdom = require("jsdom");
const { JSDOM } = jsdom;


const dom = new JSDOM(`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<body>
    <div id="link"></div>
    <p>Hello world</p>

    <script src="http://localhost/2022/jsdom/out.js"></script>
</body>


</html>`, { resources: "usable", runScripts: "dangerously"});
const document = dom.window.document;

console.log(document.getElementsByTagName('html')[0].innerHTML);

out.js

let T = document.getElementById('link');
T.innerHTML = '<a href="htt://">LINK</a>';
console.log('bar says: hello');

The loading and executing of the script by jsdom is probably an asynchronous process, therefore the link inside the <div> will not be present immediately. But you log document.getElementsByTagName('html')[0].innerHTML immediately after constructing the dom. — Heiko Theißen
– Heiko Theißen, Commented Oct 10, 2022 at 16:44

Quentin · Accepted Answer · 2022-10-10 16:54:55Z

3

JSDOM loads sub-resources asynchronously, so your Node.js code is accessing the DOM before the <script> code has executed.

This is also why the log of document.getElementsByTagName('html')[0].innerHTML appears before the log of 'bar says: hello'.

You can handle this by explicitly waiting for the load event:

const document = dom.window.document;
document.addEventListener('load', () => {
    console.log(document.getElementsByTagName('html')[0].innerHTML);
});

You'll need more complex logic if the script itself does anything asynchronously. Firing a custom event that you can listen for is a good approach.

answered Oct 10, 2022 at 16:54

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jsdom load javascript code but doesn't run correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related