npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

global-jsdom

v25.0.0

Published

Enable DOM in Node.js

Downloads

345,387

Readme

global-jsdom

npm version Node.js CI

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.

// commonjs
require('global-jsdom/register')

// or es2015
import 'global-jsdom/register'

// you can now use the DOM
document.body.innerHTML = 'hello'

// you can also access the current jsdom instance through $jsdom
global.$jsdom.reconfigure({})

Configuration

You may pass configuration parameters to jsdom like so:

// commonjs
const globalJsdom = require('global-jsdom')

// or es2015
import globalJsdom from 'global-jsdom'

// then
globalJsdom(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

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

Cleanup

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

// commonjs
const cleanup = require('global-jsdom')()

// es2015
import globalJsdom from 'global-jsdom'
const cleanup = globalJsdom()

// do things, then
cleanup()

Tape

In tape, run it before your other tests.

require('global-jsdom/register')

test('your tests', (t) => {
  /* and so on... */
})

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.

before(function () {
  this.jsdom = require('global-jsdom')()
})

after(function () {
  this.jsdom()
})

ES2015

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

import 'global-jsdom/register'
import React from 'react'
import jQuery from 'jquery'
// ...

Typescript

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

import globalJsdom from "global-jsdom";

describe("Typescript test example", () => {
  let cleanup: { (): void };

  before(() => {
      cleanup = globalJsdom();
  });

  after(() => {
    cleanup();
  });

})

Thanks

original code forked from jsdom-global