React-testing-library: Missing documentation on polyfills for non-jest users

Created on 19 Jul 2018 · 10Comments · Source: testing-library/react-testing-library

react-testing-library version: 4.1.3
react version: 16.4.1
node version: 8.11.1
yarn version: 1.6.0
jsdom version: 11.11.0

Relevant code or config:

/* eslint-disable */
import React, {Component} from 'react'
import {render, waitForElement, cleanup} from 'react-testing-library'
import {expect} from 'chai'

class Foobar extends Component {
  constructor (props) {
    super(props)
    this.state = {showThing: false}
  }
  componentDidMount () {
    setTimeout(() => this.setState({showThing: true}), 100)
  }
  render () {
    return (
      <div>
        Hello world
        <a>Link</a>
        {this.state.showThing && <div data-testid='thing' >Thing</div>}
      </div>
    )
  }
}

describe('react-testing-library bugs', () => {
  afterEach(cleanup)
  it('should not barf on MutationObserver being undefined', async () => {
    const {getByTestId} = render(<Foobar />)
    const thingNode = await waitForElement(() => getByTestId('thing'))
    expect(thingNode).to.not.be.null
  })

  it('should not barf on Node being undefined', async () => {
    const {getByText} = render(<Foobar />)
    const linkNode = getByText('Link')
    expect(linkNode).to.not.be.null
  })
})

// my mocha test_helper.js
import jsdom from 'jsdom'
const dom = new jsdom.JSDOM('<!doctype html><html><body></body></html>')

global.window = dom.window
global.document = dom.window.document
global.navigator = dom.window.navigator

What you did:

Attempting to use waitForElement and getByText.

What happened:

  1) react-testing-library bugs
       should not barf on MutationObserver being undefined:
     ReferenceError: MutationObserver is not defined
      at /Users/davidadams/Code/react-testing-library-bug/node_modules/dom-testing-library/dist/wait-for-element.js:61:5
      at new Promise (node_modules/core-js/modules/es6.promise.js:177:7)

      at waitForElement (node_modules/dom-testing-library/dist/wait-for-element.js:26:10)
      at _callee$ (test/broken-test.js:29:29)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:65:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:303:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:117:21)
      at step (test/broken-test.js:15:191)
      at /Users/davidadams/Code/react-testing-library-bug/test/broken-test.js:15:437
      at new Promise (node_modules/core-js/modules/es6.promise.js:177:7)
      at Context.<anonymous> (test/broken-test.js:15:99)

  2) react-testing-library bugs
       should not barf on Node being undefined:
     ReferenceError: Node is not defined
      at /Users/davidadams/Code/react-testing-library-bug/node_modules/dom-testing-library/dist/get-node-text.js:8:31
      at Array.filter (<anonymous>)
      at getNodeText (node_modules/dom-testing-library/dist/get-node-text.js:7:38)
      at /Users/davidadams/Code/react-testing-library-bug/node_modules/dom-testing-library/dist/queries.js:99:49
      at Array.filter (<anonymous>)
      at queryAllByText (node_modules/dom-testing-library/dist/queries.js:98:59)
      at getAllByText (node_modules/dom-testing-library/dist/queries.js:259:28)
      at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:37:30)
      at getByText (node_modules/dom-testing-library/dist/queries.js:271:42)
      at _callee2$ (test/broken-test.js:35:22)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:65:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:303:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:117:21)
      at step (test/broken-test.js:15:191)
      at /Users/davidadams/Code/react-testing-library-bug/test/broken-test.js:15:437
      at new Promise (node_modules/core-js/modules/es6.promise.js:177:7)
      at Context.<anonymous> (test/broken-test.js:15:99)

Reproduction:

I've created a barebones repo that illustrates the problem.

Problem description:

I believe the problem is jsdom and the fact that i'm not using jest. I'm using mocha. It appears that maybe jest polyfills some of these browser apis(?)

Most helpful comment

I think you're right. I was able to get it working with the following:

import jsdom from 'jsdom'
const dom = new jsdom.JSDOM('<!doctype html><html><body></body></html>')

global.window = dom.window
global.document = dom.window.document
global.navigator = dom.window.navigator

// new lines
global.Node = dom.window.Node
require('mutationobserver-shim')
global.MutationObserver = global.window.MutationObserver

It appears as though the shim is attaching MutationObserver to the window and dom-testing-library is referencing it globally.

dadamssg on 19 Jul 2018

👍8 ❤2 🎉1

All 10 comments

Could you dig a little bit into this, because jest doesn't polyfill mutationobserver, that's actually built-into dom-testing-library (which is where waitForElement comes from): https://github.com/kentcdodds/dom-testing-library/blob/6e9d7c5497bd3350a68e56c5f6a2ee7340059a02/src/wait-for-element.js

The fact that it's not working is surprising to me because we don't do anything special.

For the other one we could probably change this to window.Node :+1: Feel free to make a PR for that :+1:

kentcdodds on 19 Jul 2018

We should also have a section of docs for: "Non-jest usage" I think it should include copying all globals from window onto the global object (because third party libraries and your own code probably relies on those global values being available because they are in the browser).

kentcdodds on 19 Jul 2018

I think you're right. I was able to get it working with the following:

import jsdom from 'jsdom'
const dom = new jsdom.JSDOM('<!doctype html><html><body></body></html>')

global.window = dom.window
global.document = dom.window.document
global.navigator = dom.window.navigator

// new lines
global.Node = dom.window.Node
require('mutationobserver-shim')
global.MutationObserver = global.window.MutationObserver

It appears as though the shim is attaching MutationObserver to the window and dom-testing-library is referencing it globally.

dadamssg on 19 Jul 2018

👍8 ❤2 🎉1

Gotcha. That makes sense that it's working properly for jest then. I'd be happy to accept a PR to dom-testing-library to make it use window.MutationObserver instead of expecting it on the global. That makes sense for this case. Other than that, I don't think we need to have other changes other than a section in the docs :) Thanks!

kentcdodds on 19 Jul 2018

No problem.

Just forked dom-testing-library to attempt a PR but got a failing test on npm run setup. Not sure how to procede...

screen shot 2018-07-19 at 11 43 56 am

dadamssg on 19 Jul 2018

The setup that you do to setup your DOM is not all correct. I can share my setup because I had that error and I fixed it. Give me few time to get my hands on the code

ematipico on 19 Jul 2018

I opened a PR nonetheless. I would like to know what you did to get setup correctly though.

dadamssg on 19 Jul 2018

Huh, yeah, that's weird. I don't get that issue on my machine 🤔 And it looks like your PR passed CI.

I'm going to change this issue to a documentation issue with your PR merged now. Would you be willing to add a PR to the README in react-testing-library (and/or dom-testing-library) to show how to use these libraries without jest?

kentcdodds on 19 Jul 2018

PR for docs on usage without jest

dadamssg on 20 Jul 2018

👍2

:tada: This issue has been resolved in version 4.1.4 :tada:

The release is available on: