What is jsdom-global?
The jsdom-global npm package is used to set up a global DOM environment in Node.js, which is particularly useful for testing and running scripts that are designed to work in a browser environment. It leverages the jsdom library to create a simulated DOM, allowing developers to run browser-specific code in a Node.js environment.
What are jsdom-global's main functionalities?
Global DOM Setup
This feature sets up a global DOM environment by requiring the jsdom-global package. The code sample demonstrates how to initialize the global DOM and log the document object to the console.
require('jsdom-global')();
console.log(window.document);
Simulating Browser APIs
This feature allows you to simulate browser-specific APIs like `alert`. The code sample shows how to override the `alert` function to log messages to the console instead.
require('jsdom-global')();
window.alert = (msg) => console.log(`Alert: ${msg}`);
window.alert('Hello, world!');
Testing with Mocha
This feature is useful for setting up a DOM environment for testing purposes. The code sample demonstrates how to use jsdom-global with the Mocha testing framework and Chai assertion library to test DOM manipulation.
const jsdomGlobal = require('jsdom-global');
const { expect } = require('chai');
jsdomGlobal();
describe('DOM Manipulation', () => {
it('should create a new div element', () => {
const div = document.createElement('div');
document.body.appendChild(div);
expect(document.body.contains(div)).to.be.true;
});
});
Other packages similar to jsdom-global
jsdom
The jsdom package is the underlying library that jsdom-global uses to create a simulated DOM environment. While jsdom-global sets up a global environment automatically, jsdom requires more manual setup but offers more control and customization options.
happy-dom
Happy DOM is another package that provides a DOM-like environment for Node.js. It is designed to be lightweight and fast, making it a good alternative to jsdom-global for performance-critical applications.
linkedom
LinkeDOM is a minimalistic and fast DOM implementation for Node.js. It aims to be a lightweight alternative to jsdom, providing essential DOM functionalities with a focus on performance.
jsdom-global
Enables DOM in Node.js
jsdom-global will inject document
, window
and other DOM API into your Node.js environment. Useful for tests.
Install
Requires jsdom.
npm install --save-dev --save-exact jsdom jsdom-global
Usage
Just invoke it to turn your Node.js environment into a DOM environment.
var jsdom = require('jsdom-global')
jsdom()
document.body.innerHTML = 'hello'
You can also invoke it with a function block so it'll clean up afterwards.
jsdom(function () {
var $ = require('jquery')
$('body').html('hello')
})
In tape, run it before your other tests.
var test = require('tape')
if (process.env.JSDOM) {
test('jsdom', (t) => {
require('jsdom-global')()
t.pass('jsdom enabled')
t.end()
})
}
Or even use the tape helper, which will accomplish the same thing:
var test = require('tape')
test('jsdom', require('jsdom-global/tape')())
Thanks
jsdom-global © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com ·
GitHub @rstacruz ·
Twitter @rstacruz