1. jsdom-global
Enable DOM in Node.js
jsdom-global
Package: jsdom-global
Created by: rstacruz
Last modified: Sun, 19 Jun 2022 05:58:44 GMT
Version: 3.0.2
License: MIT
Downloads: 1,753,382
Repository: https://github.com/rstacruz/jsdom-global

Install

npm install jsdom-global
yarn add jsdom-global

jsdom-global

Enables DOM in Node.js

jsdom-global will inject document, window and other DOM API into your Node.js environment. Useful for running, in Node.js, tests that are made for browsers.

Status

Install

Requires jsdom.

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

Note

jsdom-global now requires jsdom v10 or above. If you need jsdom v9 and below, use the previous version (jsdom-global@2).

Usage

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

 require('jsdom-global')()

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

You may also pass parameters to jsdomGlobal() like so: require('jsdom-global')(html, options).
Check the jsdom.jsdom() documentation for valid values for the options parameter.

To clean up after itself, just invoke the function it returns.

 var cleanup = require('jsdom-global')()

// do things

cleanup()

Tape

In tape, run it before your other tests.

 require('jsdom-global')()

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 jsdom-global/register

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

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

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

ES2015

If you prefer to use import rather than require, you might want to use jsdom-global/register instead. Place it on top of your other import calls.

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

Browserify

If you use Browserify on your tests (eg: smokestack, tape-run, budo, hihat, zuul, and so on), doing require('jsdom-global')() is a noop. In practice, this means you can use jsdom-global even if your tests are powered by browserify, and your test will now work in both the browser and Node.

  • Writing your tests (test.js):

     require('jsdom-global')()
    
    // ...do your tests here
    
  • Running it with smokestack:

     browserify test.js | smokestack          # run in a browser
    node test.js                             # or the console
    browserify test.js --no-bundle-external  # also works (but why bother?)
    
  • Running it with Babel (babelify or babel-cli):

     browserify test.js -t babelify | smokestack  # run in a browser (with babel)
    babel-node test.js                           # or the console
    

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin