How to test React.Portal

[bugzpodder]

react-testing-library: 2.1.1
node: 8.9.3
yarn: 1.6.0

import React from "react";
import { render, Simulate } from "react-testing-library";

import Button from "material-ui/Button";
import Dialog, {
  DialogActions,
  DialogContent,
  DialogTitle
} from "material-ui/Dialog";

export const CommonDialog = props => {
  const { body, children, hideModal, isVisible, title } = props;
  return (
    <Dialog open={isVisible}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        {body}
        {children}
      </DialogContent>
      <DialogActions>
        <Button id="close" onClick={hideModal}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

test("render dialog", () => {
  const mockCallback = jest.fn();
  const { getByText, getByTestId, container } = render(
    <CommonDialog title="test" isVisible={true} hideModal={mockCallback} />
  );
  Simulate.click(getByText("Close"));
  expect(mockCallback).toBeCalled();
  expect(container).toMatchSnapshot();
});

in the snapshot, it is just a simple div, and the Close button could not be found. It is not immediately not obvious what's went wrong here.
I was using enzyme and it is working fine.

[bugzpodder]

checked source code, Dialog uses Portal so maybe thats why?

[bugzpodder]

was able to workaround with { container: document.body } passed into render

[kentcdodds]

Glad you found a workaround 👍

[kentcdodds]

Make sure to unmount at the end of your test to clean up the document.body

[ericmaicon]

Hey, this solve my problem while test a Component using reactstrap modal. I am wondering if there is a way to supress warnings, though.

[bugzpodder]

test("render dialog", () => {
	//  Disable Warning: render(): Rendering components directly into document.body is discouraged.
	const console = global.console;
	global.console = { error: jest.fn() };
	const { container, unmount } = render(
                 <Component />,
		{ container: document.body },
	);
	unmount();
	global.console = console;
});

[ericmaicon]

Thanks @bugzpodder. Worked!

[kentcdodds]

I would not recommend that solution. That's just hiding the problem and it's kinda annoying boilerplate. Here's another example of how to test a portal: https://github.com/kentcdodds/react-testing-library-course/blob/8069bf725dc0dd3774c39f7b8c5a3b226d2f06d0/src/__tests__/06.js

Rather than using render with the container as document.body, just use renderIntoDocument and it'll add a new div into the document.body which will avoid the error.

[ericmaicon]

ahmmm...I can see now why I had never got renderIntoDocument to work..
I was trying to do something like this:

...

const { getByTestId, unmount } = renderIntoDocument(<App /);

But, as I can see in your example, the getByTestId came from bindElementToQueries function:

import { bindElementToQueries } from 'dom-testing-library';

...

const { getByTestId } = bindElementToQueries(document.body);
const { unmount } = renderIntoDocument(<App /);
....
unmount();

This works as well.
Thanks

[ivan-kleshnin]

I struggle to find an accessible example on testing portals with react-testing-library. Can you guys help me?

I have the following code:

let portalRoot = document.getElementById("portal")

export default class Modal extends React.Component {
  constructor(props) {
    super(props)
    this.el = document.createElement("div")
  }

  componentDidMount() {
    portalRoot.appendChild(this.el)
  }

  componentWillUnmount() {
    portalRoot.removeChild(this.el)
  }

  render() {
    let {children, toggle, on, modalBgClass = "", modalWindowClass = ""} = this.props
    return on && ReactDOM.createPortal(
      <Background modalBgClass={modalBgClass} toggle={toggle}>
        <div className={cc("window", modalWindowClass)}>
          <div className="close">
            <i className="icon fa fa-times" aria-label="Close" onClick={toggle}></i>
          </div>
          {children}
        </div>
      </Background>
    , this.el)
  }
}

which breaks with TypeError: Cannot read property 'appendChild' of null on portalRoot.appendChild(this.el). In original HTML I had:

<div id="root"></div>
<div id="portal"></div>

How to emulate the same structure or workaround it alternatively with this library?

[kentcdodds]

The problem is that when the code let portalRoot = document.getElementById("portal") is run, there is no element in the document with the ID of portal so portalRoot is null.

You can create it with:

const portalRoot = document.createElement('div')
portalRoot.setAttribute('id, 'portal')
document.body.appendChild(portalRoot)

There are various ways you can do this (in a test setup file, or in a test beforeAll which would require a slight modification to your component to query for that element within the lifecycles).

What I would do personally that would solve this is in your component file, do this:

let portalRoot = document.getElementById("portal")
if (!portalRoot) {
  portalRoot = document.createElement('div')
  portalRoot.setAttribute('id, 'portal')
  document.body.appendChild(portalRoot)
}

This would also mean that you don't have to have the HTML in your app with the portal element ahead of time which reduces the chance of this error happening in production 👌

Good luck!