Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@happy-dom/jest-environment

Package Overview
Dependencies
Maintainers
1
Versions
531
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@happy-dom/jest-environment

A Jest DOM environment with support for web components using happy-dom.

  • 1.17.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
42K
decreased by-1.96%
Maintainers
1
Weekly downloads
 
Created
Source

Happy DOM Logo

About

A JSDOM alternative with support for server side rendering of web components.

Happy DOM aim to support the most common functionality of a web browser.

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

DOM Features

  • Custom Elements (Web Components)

  • Shadow Root (Shadow DOM)

  • Mutation Observer

  • Tree Walker

  • Fetch

And much more..

Works With

Installation

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

Setup

Jest uses JSDOM 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"
        }
    }
    
  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"
    }
    
  3. Save the file.

Testing Async Code

When testing asynchrounous code it is possible to wait for asynchrounous tasks to finish using the method "whenAsyncComplete()".

describe('scrollToTop()', () => {
    it('scrolls to top using the built in browser animation', () => {
        element.scrollToTop();
        await whenAsyncComplete();
        expect(document.documentElement.scrollTop).toBe(0);
    });
});

Performance

OperationJSDOMHappy DOM
Import / Require333 ms45 ms
Parse HTML256 ms26 ms
Serialize HTML65 ms8 ms
Render custom element214 ms19 ms
querySelectorAll('tagname')4.9 ms0.7 ms
querySelectorAll('.class')6.4 ms3.7 ms
querySelectorAll('[attribute]')4.0 ms1.7 ms
querySelectorAll('[class~="name"]')5.5 ms2.9 ms
querySelectorAll(':nth-child(2n+1)')10.4 ms3.8 ms

See how the test was done here

Keywords

FAQs

Package last updated on 23 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc