Tested React: Build and Test Modal using React features and DOM events

Previous Issue: https://medium.com/front-end-hacking/tested-react-lets-build-a-data-table-a76aa100d23fPhoto by Alexej Алексей Simonenko Симоненко on Unsplash"Tested React" series of guides to get people accustomed to testing components in React ecosystem. This series IS NOT about setting up testing environments for React — The goal is to help you build intuition on what to test in your React apps.In this issue, we are going to build a Modal (or Dialog) component to get familiar with testing components that rely on Portals, Refs, and DOM events (Modal requires all these features!).https://medium.com/media/18214d8333adbb5668f31791a3202b60/hrefSpecification: ModalThere are specific things that a Modal component must do:Render the modal in document body (using Portals)Render an Overlay over the whole page and create a content box for its children.Trigger (this is important) modal close if user presses ESC key or if user clicks the overlay.The modal component must not be responsible for closing itself because the logic to close the modal can differ in implementation (via state, props, redux etc) and the way a modal is triggered can also differ (via button click, React Router, DOM events etc).

✔ Read More...

I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to

react,jest,testing,javascript,enzyme