Testing DOM using JSDOM in sinon/mocha
I’ll show you how to use JSDOM in your frontend testing in this article.
When you run a unit test in node.js, you’ll notice that the document or window object isn’t accessible. As a result, testing it is extremely difficult. The good news is that someone smart built virtual dom in node.js that mimics the exact behaviour of the browser. The package’s name is JSDOM, and you can learn more about it here. You can read more about this at JSDOM
Let us dive into the code. Consider the following HTML file as you can see that HTML has one button and h1 tag with title id. Also, This file refers to one external JavaScript file app.js
<!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>
<button type="submit" id="btn"></button>
<h1 id="title"></h1>
</body>
<script src="./app.js"></script>
</html>
STEP1
Go to the terminal and install the package JSDOM by running the following command.
npm install jsdom
STEP 2
Let’s create a file named render.js and add the following code. As In, the following code I am simply reading the HTML file and passing the file to JSDOM with two parameters runScripts and usable.
const path = require('path');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const render = async filename => {
const filePath=filename;
const dom = await JSDOM.fromFile(filePath, {
runScripts: 'dangerously',
resources: 'usable'
});
return new Promise((resolve, reject) => {
dom.window.document.addEventListener('DOMContentLoaded', () => {
resolve(dom);
});
});
};
module.exports = render;
STEP3
Now it's time to write the test. First load the JSDOM helper module that we created in the second step. After that, you can use the javascript selector and assert the condition.
const render = require("../src/render");
describe("JSDOM", () => {
it("should set the title when the button is clicked", async () => {
const dom = await render(`../src/index.html`);
dom;
const btn = dom.window.document.getElementById("btn");
btn;
dom.window.document
.querySelector("button")
.dispatchEvent(new dom.window.Event("click"));
const h1 = dom.window.document.querySelector("h1");
console.log("Contents of h1", h1.innerHTML);
});
});
