1. window
Exports a jsdom window object.
window
Package: window
Created by: lukechilds
Last modified: Wed, 29 Jun 2022 02:05:07 GMT
Version: 4.2.7
License: MIT
Downloads: 163,137
Repository: https://github.com/lukechilds/window

Install

npm install window
yarn add window

window

Exports a jsdom window object.

Build Status
Coverage Status
npm
npm

Exports a jsdom window object. This is useful for enabling browser modules to run in Node.js or testing browser modules in any Node.js test framework.

Requires Node.js v6 or newer, use window@3 to support older Node.js versions.

Install

 npm install --save window

Or if you're just using for testing you'll probably want:

 npm install --save-dev window

Usage

 const Window = require('window');

const window = new Window();

const div = window.document.createElement('div');
// HTMLDivElement

div instanceof window.HTMLElement
// true

Because window is just a normal JavaScript object it can be used more efficiently with object destructuring.

 const { document } = new Window();

document.body.innerHTML = '<div class="foo">Hi!</div>';
document.body.querySelector('.foo').textContent;
// "Hi!"

Config

You can also pass a jsdom config object that will be passed along to the underlying jsdom instance.

 const jsdomConfig = { userAgent: 'Custom UA' };
const window = new Window(jsdomConfig);

window.navigator.userAgent;
// "Custom UA"

Universal Testing Pattern

You can use a really simple pattern to enable your browser modules to run in Node.js. Just allow a window object to be passed in to your module and prepend any references to browser globals with win. Set win to the passed in window object if it exists, otherwise fallback to global window.

 function createTitle(text, win) {
  win = win || (typeof window === 'undefined' ? undefined : window);

  const title = win.document.createElement('h1');
  title.innerHTML = text;
  return title;
};

module.exports = createTitle;

Browser usage:

 createTitle('Hi');
// <h1>Hi</h1>

Node.js usage:

 const window = new Window();

createTitle('Hi', window);
// <h1>Hi</h1>

Obviously you don't need to follow this exact pattern, maybe you already have an options object and you only need document not the entire window object:

 function createTitle(text, opts = {}) {
  const doc = opts.document || window.document;

  const title = doc.createElement('h1');
  ...

You can see an example of this pattern in lukechilds/create-node. Specifically src/create-node.js and test/unit.js.

What about dependencies?

Sometimes you may have dependencies that you can't pass a window object to. In that scenario you can alternatively use browser-env which will simulate a global browser environment.

License

MIT © Luke Childs

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code