CODEWITHSUNDEEP
jestjsjsdomsystemjs
user5325596
user5325596

Reputation: 2410

How can I configure the jsdom instance used by jest?

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?

Upvotes: 13

Views: 14163

Answers (4)

Sergiy Seletskyy
Sergiy Seletskyy

Reputation: 17110

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"
    ]
  }
}

Upvotes: -2

beckr
beckr

Reputation: 41

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

Upvotes: 2

Special Character
Special Character

Reputation: 2359

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

Upvotes: 8

Evan Siroky
Evan Siroky

Reputation: 9408

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.

Upvotes: 0

Related Questions