Add utilities for mounting and un-mounting components #53
Conversation
A common pattern in our tests is to render a component and add the wrapper and (optionally) its DOM container to a list of active wrappers/containers. At the end of the test a Mocha `afterEach` block is then used to ensure all components are unmounted. This commit adds `mount` and `unmountAll` utilities to this package to simplify this pattern. The `mount` function renders the component and adds its wrapper to the active set. `unmountAll` unmounts all active wrappers.
| export type MountOptions = { | ||
| /** | ||
| * If true, the element will be rendered in a container element which is | ||
| * attached to `document.body`. | ||
| */ | ||
| connected?: boolean; | ||
| }; |
There was a problem hiding this comment.
This is convenient, as very frequently we need the element to actually be in the DOM and we don't care about the container, but there are cases in which we need to customize the container with styles and such. See this test for example.
Maybe we could allow an HTMLElement to be conditionally provided, either by allowing the connected option to be connected?: boolean | HTMLElement, or by providing a more complex union type where either connected?: boolean or container?: HTMLElement to be allowed.
The later is probably more correct from a type point of view, but will require more checks.
We could also try to find a different option name where boolean | HTMLElement feels less awkward.
There was a problem hiding this comment.
To begin with I would suggest that callers continue to use the underlying Enzyme API if they need to customize the container. When we better understand how custom containers are used then we could integrate it into this convenience API. There are some details I'm not sure about. For example, with this API the container is "owned" by this package and gets removed when unmountAll is called. I'm not sure if that is appropriate for custom containers.
There was a problem hiding this comment.
Yeah, good point.
Let's land this. It will allow us to remove a lot of duplicated code already.
A common pattern in our tests is to render a component and add the wrapper and (optionally) its DOM container to a list of active wrappers/containers. At the end of the test a Mocha
afterEachblock is then used to ensure all components are unmounted.This commit adds
mountandunmountAllutilities to this package to simplify this pattern. Themountfunction renders the component and adds its wrapper to the active set.unmountAllunmounts all active wrappers.