global-jsdom

Enables DOM in Node.js global-jsdom will inject document, window and other DOM API into your Node.js environment. This allows you to run browser tests in Node.js. The specific attributes set on global come directly from the jsdom version you have installed.

Versioning

global-jsdom uses the same major version as the jsdom that it wraps.

Install

Requires node >= 18.

npm install --save-dev --save-exact jsdom global-jsdom

Usage

Just invoke it to turn your Node.js environment into a DOM environment.

1// commonjs
2require('global-jsdom/register')
3
4// or es2015
5import 'global-jsdom/register'
6
7// you can now use the DOM
8document.body.innerHTML = 'hello'
9
10// you can also access the current jsdom instance through $jsdom
11global.$jsdom.reconfigure({})

Configuration

You may pass configuration parameters to jsdom like so:

1// commonjs
2const globalJsdom = require('global-jsdom')
3
4// or es2015
5import globalJsdom from 'global-jsdom'
6
7// then
8globalJsdom(html, options)

Check the jsdom.jsdom() documentation for valid values for the options parameter.

Default Options

The following set of default options are passed to jsdom

1{
2  // if url isn't set then localStorage breaks with a cryptic error, see
3  // https://github.com/jsdom/jsdom/issues/2304#issuecomment-408320484
4  url: 'http://localhost:3000',
5  // pretendToBeVisual is enabled so that react works, see
6  // https://github.com/jsdom/jsdom#pretending-to-be-a-visual-browser
7  pretendToBeVisual: true,
8}

Cleanup

To clean up the global namespace just invoke the returned function:

1// commonjs
2const cleanup = require('global-jsdom')()
3
4// es2015
5import globalJsdom from 'global-jsdom'
6const cleanup = globalJsdom()
7
8// do things, then
9cleanup()

Tape

In tape, run it before your other tests.

1require('global-jsdom/register')
2
3test('your tests', (t) => {
4  /* and so on... */
5})

Mocha

Simple: Use Mocha's --require option. Add this to the test/mocha.opts file (create it if it doesn't exist)

-r global-jsdom/register

Advanced: For finer control, you can instead add it via mocha's before and after hooks.

1before(function () {
2  this.jsdom = require('global-jsdom')()
3})
4
5after(function () {
6  this.jsdom()
7})

ES2015

If you're using a recent version of node then import should just work:

1import 'global-jsdom/register'
2import React from 'react'
3import jQuery from 'jquery'
4// ...

Typescript

The library includes automatic support providing the necessary type declarations for an integration without further configuration.

1import globalJsdom from "global-jsdom";
2
3describe("Typescript test example", () => {
4  let cleanup: { (): void };
5
6  before(() => {
7      cleanup = globalJsdom();
8  });
9
10  after(() => {
11    cleanup();
12  });
13
14})

Thanks

original code forked from jsdom-global