https://github.com/fabioantunes/react-portals-example

Testing React portals with enzyme
https://github.com/fabioantunes/react-portals-example

enzyme enzyme-testing jsdom modal modals portals react react-16 react-portals testing

Last synced: 15 days ago
JSON representation

Testing React portals with enzyme

• Host: GitHub
• URL: https://github.com/fabioantunes/react-portals-example
• Owner: FabioAntunes
• Created: 2018-08-22T11:51:07.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T12:09:44.000Z (about 6 years ago)
• Last Synced: 2024-10-11T20:22:30.161Z (about 1 month ago)
• Topics: enzyme, enzyme-testing, jsdom, modal, modals, portals, react, react-16, react-portals, testing
• Language: JavaScript
• Size: 109 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

## Testing React 16 Portals with enzyme

This is a repo with an example of a working modal, using React 16 Portals.

This is the solution for the question and answer that I posted on [stackoverflow](https://stackoverflow.com/questions/48094581/testing-react-portals-with-enzyme)

## Running the project

Install dependencies

```

yarn|npm install

```

Start the project

```

yarn|npm start

```

Run the tests

```

yarn|npm test

```

## Testing portals

So basically the idea is that for us to test portals we need to modify our `jsdom` so when we use `enzyme` to mount our components, we have the desired div.

To modify the default jsdom html all we need to do before running our tests is this:

```javascript

const modalRoot = global.document.createElement('div');

modalRoot.setAttribute('id', 'modal-root');

const body = global.document.querySelector('body');

body.appendChild(modalRoot);

```

the code and the tests are self explanatory.