@happy-dom/jest-environment

About

Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.

The goal of Happy DOM is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.

Happy DOM focuses heavily on performance and can be used as an alternative to JSDOM.

This package makes it possible to use Happy DOM with Jest.

DOM Features

• Custom Elements (Web Components)

• Shadow Root (Shadow DOM)

• Declarative Shadow DOM

• Mutation Observer

• Tree Walker

• Fetch

And much more..

Works With

• Google LitHTML

• Google LitElement

• React

• Angular

• Vue

Module Systems

• CommonJS (ESM is not supported due to limitations with Jest)

Installation

npm install @happy-dom/jest-environment --save-dev

Setup

Jest uses node as test environment by default. In order to tell Jest to use a different environment we will either have to set a CLI attribute, define it in "package.json" or add a property to your Jest config file.

CLI

1. Edit your "package.json" file.

2. Add "--env=@happy-dom/jest-environment" as an attribute to your Jest command.

   {
   	"scripts": {
   		"test": "jest --env=@happy-dom/jest-environment"
   	}
   }
   

3. Save the file.

In "package.json"

1. Edit your "package.json" file.

2. Add the following to it:

   {
    "jest": {
      "testEnvironment": "@happy-dom/jest-environment",
      "testEnvironmentOptions": {
        "url": "http://localhost",
        "width": 1920,
        "height": 1080,
        "settings": {
          "navigator": {
             "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
          }
        }
      }
    }
   }
   

3. Save the file.

Configuration File

1. Edit your Jest config file (usually jest.config.js)

2. Add the following to it:

   {
    "testEnvironment": "@happy-dom/jest-environment",
    "testEnvironmentOptions": {
      "url": "http://localhost",
      "width": 1920,
      "height": 1080,
      "settings": {
        "navigator": {
           "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36"
        }
      }
    }
   }
   

3. Save the file.

Documentation

Read more about how Happy DOM works in our documentation.

Performance

Operation	JSDOM	Happy DOM
Import / Require	333 ms	45 ms
Parse HTML	256 ms	26 ms
Serialize HTML	65 ms	8 ms
Render custom element	214 ms	19 ms
querySelectorAll('tagname')	4.9 ms	0.7 ms
querySelectorAll('.class')	6.4 ms	3.7 ms
querySelectorAll('[attribute]')	4.0 ms	1.7 ms
querySelectorAll('[class~="name"]')	5.5 ms	2.9 ms
querySelectorAll(':nth-child(2n+1)')	10.4 ms	3.8 ms

See how the test was done here

Sister Projects

Sponsors