How can I configure the jsdom instance used by jest?

A

4

13

I've come up against this issue Invalid URL is thrown when requiring systemjs in jest test cases

One of the last comments suggests

"manipulate the jsdom instance to have a valid location / baseURI by setting the referrer config in jsdom."

I'm wondering is there way for me to do that? Can I access the jsdom instance somehow from the jest object?

Abbott answered 21/1, 2016 at 15:34 Comment(0)

A

8

I had a similar issue when using a project requiring a url (location.href). You can configure jest with a testURL in your configuration.

Here is what you might put in your package.json (if that is how you configure jest).

"jest": {
    ...other config,
    "testURL": "http://localhost:8080/Dashboard/index.html"
}

testURL Doc

If you need more specific changes to jsdom you can install jsdom yourself and import and configure it separately from jest. Here is an example:

test.js

'use strict';
import setup from './setup';
import React from 'react';
import { mount } from 'enzyme';
import Reportlet from '../components/Reportlet.jsx';

it('Reportlet Renders', () => {
    ...some test stuff
});

setup.js

import jsdom from 'jsdom';
const DEFAULT_HTML = '<html><body></body></html>';

// Define some variables to make it look like we're a browser
// First, use JSDOM's fake DOM as the document
global.document = jsdom.jsdom(DEFAULT_HTML);

// Set up a mock window
global.window = document.defaultView;
global.window.location = "https://www.bobsaget.com/"
// ...Do extra loading of things like localStorage that are not supported by jsdom

Aubigny answered 18/1, 2017 at 1:51 Comment(1)

Note that testURL was removed in Jest 28, it can now be set via testEnvironmentOptions.url in jest.config.js instead (see github.com/jestjs/jest/pull/10797). – Dressy 29/2 at 12:14

R

2

I just went down this road and found out that as of Jest 21.2.1, the official way is to fork your own JSDom environment.

This is a bit painful to set up but allows in-depth customization.

References:

Sample environment: https://github.com/mes/jest-environment-jsdom-external-scripts

Rania answered 15/10, 2017 at 13:39 Comment(1)

This is hard mode, for sure. But I don't see any other alternatives documented on the web, and Jest's official position seems to be "no." – Diocesan 1/7, 2021 at 18:27

E

0

jsdom is the default environment that the latest version of Jest uses, so you can simply manipulate the global variables such as window, document or location.

Embracery answered 5/10, 2016 at 19:8 Comment(1)

From jsdom v11, window.location object become not configurable, and thus can not be modified with Object.defineProperty() anymore. – Forsaken 30/11, 2017 at 14:48

S

-2

If you are using jsdom (ver 11.12.0) without jest (e.g. with ava + enzyme) then you can set url in jsdom config file

File src/test/jsdom-config.js

const jsdom = require('jsdom') // eslint-disable-line
const { JSDOM } = jsdom

const dom = new JSDOM('<!DOCTYPE html><head/><body></body>', {
  url: 'http://localhost/',
  referrer: 'https://example.com/',
  contentType: 'text/html',
  userAgent: 'Mellblomenator/9000',
  includeNodeLocations: true,
  storageQuota: 10000000,
})
global.window = dom.window
global.document = window.document
global.navigator = window.navigator

AVA settings in package.json

{
  ...
  "scripts": ...
  ...
  "ava": {
    "babel": "inherit",
    "files": [
      "src/**/*.test.js"
    ],
    "verbose": true,
    "require": [
      "babel-register",
      "ignore-styles",
      "./src/test/jsdom-setup.js",
      "./src/test/enzyme-setup.js"
    ]
  }
}

Samella answered 6/8, 2018 at 7:40 Comment(1)

p.s. I've just found this question while trying to solve my non-jest problem – Samella 6/8, 2018 at 9:24

Recommended topics

Hot tags