How can I configure the jsdom instance used by jest?
Clash Royale CLAN TAG#URR8PPP
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?
jsdom
jest
4 Answers
4
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
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.
window
document
location
window.location
Object.defineProperty()
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
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
jsdom
jest
ava + enzyme
File src/test/jsdom-config.js
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
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"
]
p.s. I've just found this question while trying to solve my non-jest problem
– Serge Seletskyy
Aug 6 at 9:24
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
From jsdom v11,
window.locationobject become not configurable, and thus can not be modified withObject.defineProperty()anymore.– Blackus
Nov 30 '17 at 14:48