support jest / react-test-renderer

[priley86]

This Modal component does not seem support Jest / react-test-renderer.

Simple test:

import React from 'react'
import renderer from 'react-test-renderer'

test('Modal renders properly', () => {
  const showModal = true
  const handleClose = jest.fn()

  const component = renderer.create(
    <div>
      <Modal
        show={showModal}
        onHide={handleClose}
        dialogClassName="modal-lg"
      >
        <div />
      </Modal>
    </div>
  )

  const tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

Returns error:

TypeError: parentInstance.children.indexOf is not a function

Currently using the following:

    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-test-renderer": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-overlays":  "^0.7.4"

[taion]

It can't – it's rendering an actual modal into a portal, and as such needs real access to the DOM.

[priley86]

have you reconsidered this at all? Are there any potential workarounds coming in the future?

[reyronald]

For the moment I've been mocking portals in the top of the test file like this:

jest.mock('rc-util/lib/Portal')

Obviously you'll need to install the rc-util package

[thomasbertet]

@reyronald this lib does not seems to use rc-util :)

[jquense]

Folks what taion is saying is that it's actually impossible to do this because of how portals work. The alternative is we make it "work" by rendering nothing, which isn't helpful for testing either. I'd use renderIntoDocument, enzymes mount(), or test the modal body of your component unwrapped from the modal itself.all these approaches work great

[reyronald]

@thomasbertet It doesn't, you would add it as a dependency in your consuming application when you want to test the modals, not here.

[ArnoSaine]

I got a Modal rendered in Jest test environment by overwriting Portal.prototype.render and Modal.prototype.getDialogElement:

import { Modal, Portal } from 'react-overlays';
import { constant, flow, noop } from 'lodash';

Portal.prototype.render = function render() {
  return this.props.children;
};

Modal.prototype.getDialogElement = flow([
  Modal.prototype.getDialogElement,
  element =>
    Object.assign(element, {
      focus: noop,
      hasAttribute: constant(true),
      setAttribute: noop
    })
]);

The DOM is different in production but that shouldn't matter if e.g. tests just compare snapshots. Is there an immediate problem that I'm missing, rendering Portal's children in place?

[chriserickson]

@ArnoSaine -- thank you for that -- your solution worked for me.

For anyone else using it, that doesn't want to use lodash, here is my adopted version

// jest.setup.js

import {Modal, Portal} from 'react-overlays';

Portal.prototype.render = function render() {
  return this.props.children;
};

const originalGetDialogElement = Modal.prototype.getDialogElement;
Modal.prototype.getDialogElement = function() {
  const element = originalGetDialogElement.apply(this);
  return {
    ...element,
    focus: () => {},
    hasAttribute: () => true,
    setAttribute: () => {}
  }
};