blueprint: DocumentFragment is not defined in jsdom + dom4

Bug report

I have a high order component that uses some Components from Blueprint/core and I’ve been trying to test it using Mocha and Enzyme. But, for some reason, when I try running my tests, they break and say I don’t have DocumentFragment from dom4.max.js.

Package version: 1.4.0 OS versions: Ubuntu 16.04

Steps to reproduce

Have a high order React Component that calls Blueprint
Write a test for it with Enzyme + Mocha
Run the tests

Actual behavior

    -> DocumentFragmentPrototype = window.DocumentFragment && DocumentFragment.prototype```

DocumentFragment is not defined

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 18 (9 by maintainers)

Most upvoted comments

This worked for me:

const keys = [
  'DocumentFragment',
  'Event',
  'KeyboardEvent',
  'MouseEvent'
]
keys.forEach((key) => {
  global[key] = document.defaultView[key]
})
global.self = document.defaultView

gimenete on Jan 27, 2017

Same issue, a lot of people use that kind of config: jsdom + enzyme + mocha/jest, it could be called a standard.

didierfranc on Jan 4, 2017

We’ve hit this same issue while attempting to integrate blueprint into our app this week. Our setup is the standard jsdom + enzyme + mocha.

DawnWright on Jan 19, 2017

You could try shimming DocumentFragment, here’s an example: https://github.com/barberboy/dom-elements/blob/d12ce3dd2e49e3e928e1501f6b9cbaa82385c217/src/index.js#L24

dom4 should also handle this more nicely – let’s file an issue / send a PR to add better support for jsdom

adidahiya on Jan 3, 2017

Good job @gimenete, thanks a lot . Your solution saved my life 😃

alanhr on Jan 27, 2017