Enzyme: Enzyme + jsdom -> TypeError: jsdom is not a function

Created on 14 May 2017 · 23Comments · Source: enzymejs/enzyme

I am trying to get Enzyme up and running with jsdom as describe here:

http://airbnb.io/enzyme/docs/guides/jsdom.html

/* setup.js */

var jsdom = require('jsdom').jsdom;

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};

However, this gives the following:

TypeError: jsdom is not a function from line 3 global.document = jsdom('');, why? And how to resolve this?

Source

maasha

👍5

Most helpful comment

Got it to work with [email protected] and [email protected] as follows:

var jsdom = require('jsdom');
const { JSDOM } = jsdom;

const { document } = (new JSDOM('')).window;
global.document = document;

vlaurin on 12 Jul 2017

👍119 🎉31 ❤25 👀1

All 23 comments

What version of jsdom are you using? Our instructions were written for v6, iirc.

https://github.com/airbnb/enzyme/pull/921 may be helpful.

ljharb on 15 May 2017

This is "jsdom": "^10.1.0", and "enzyme": "^2.8.2". #921 appears to be the same stuff, but if that is my issue then I wonder why I have this problem since the guide should be updated ...

maasha on 15 May 2017

That pr is not yet merged; if you use its instructions does it work for you?

ljharb on 15 May 2017

pls update live docs to v10 😿

edit: fyi unmerged PR docs make everything work fine 🤘

baebb on 16 May 2017

👍5

Yup, unmerged PR docs make everything work fine 🤘

maasha on 16 May 2017

Same issue with "jsdom": "^11.0.0", and "enzyme": "^2.9.1",

stevematdavies on 2 Jul 2017

Yep, same as @stevematdavies

Using setup docs from here causes error:

TypeError: require(...).jsdom is not a function

      at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:26:38)
      at handle (node_modules/worker-farm/lib/child/index.js:41:8)
      at process.<anonymous> (node_modules/worker-farm/lib/child/index.js:47:3)
      at emitTwo (events.js:125:13)
      at process.emit (events.js:213:7)
      at emit (internal/child_process.js:742:12)
      at _combinedTickCallback (internal/process/next_tick.js:105:11)
      at process._tickCallback (internal/process/next_tick.js:161:9)

csi-lk on 3 Jul 2017

Does it work with v10? It's possible v11 has a breaking change that necessitates different instructions.

ljharb on 3 Jul 2017

Got it to work with [email protected] and [email protected] as follows:

var jsdom = require('jsdom');
const { JSDOM } = jsdom;

const { document } = (new JSDOM('')).window;
global.document = document;

vlaurin on 12 Jul 2017

👍119 🎉31 ❤25 👀1

@vlaurin thanks for posting ur workaround, helped me alot mate :+1:

zulucoda on 6 Aug 2017

i use this processing but i have error :
Invariant Violation: dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure window and document are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.

what i happen, how should i do.

ttson24 on 29 Aug 2017

I believe you need to make 'window' available globally in addition to 'document' (shown in the above example). The below works for me:

import jsdom from 'jsdom';
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
global.window = document.defaultView;

Mike26372 on 5 Sep 2017

👍31

@vlaurin you saved my day man.

imranariffin on 6 Sep 2017

@vlaurin I am stranger on Internet But I really ran into your great post. My hero, Thanks a lot.

seiyashima on 15 Sep 2017

@vlaurin thanks. You solved my probelem

satyapendem on 4 Oct 2017

@Mike26372. You solved my problem

ttson24 on 13 Oct 2017

None of the workarounds presented above helped... :(

nemanjacosovic on 29 Nov 2017

@vlaurin @Mike26372
Thanks for the help. Your solution works for me.
My env has:
"enzyme": "^3.2.0",
"jsdom": "^11.5.1",

LeonHex on 1 Dec 2017

@vlaurin Where does this code go? At the top of each individual test jsx file? Or in the setup.js? From all of the examples, I am confused where the setup.js is supposed to go.

shanben7 on 21 Dec 2017

You may find this useful if using React 16

https://stackoverflow.com/questions/46435558/could-not-find-declaration-file-for-enzyme-adapter-react-16

jyotirmaybanerjee on 25 Mar 2018

Had this issue while following this guide: https://semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react
This workaround also solved it for me, thanks!: https://github.com/airbnb/enzyme/issues/942#issuecomment-314715229

mikelyons on 10 Feb 2019

hi all ,Am using

**"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0"
"jsdom": "^15.2.1".**

my test file is as follow:

 tape("d3.select(…) returns an instanceof d3.selection", function(test) {
        **var document = jsdom("<h1>hello</h1>");**
        test.ok(d3.select(document) instanceof d3.selection);
        test.end();
      });

am getting an error like

can you plz help me with this

megha-ui on 30 Dec 2019

@megha-ui this issue is closed; please file a new one if you have a new question. In this case, it looks like you're invoking jsdom without importing/requiring it.

ljharb on 30 Dec 2019

Was this page helpful?

0 / 5 - 0 ratings