From 378f0c5b91103d860fd345b98de5f878fdd7e447 Mon Sep 17 00:00:00 2001 From: Tzvi Melamed Date: Thu, 2 Aug 2018 09:41:45 -0400 Subject: [PATCH] Adds documentation for mount tracking --- README.md | 2 + docs/api/mount.md | 2 +- docs/installation/README.md | 2 + docs/installation/mount-tracking.md | 60 +++++++++++++++++++++++++++++ 4 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 docs/installation/mount-tracking.md diff --git a/README.md b/README.md index b0939b48e..65d7192f2 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() }); ``` +See [the installation docs](/docs/installation/README.md) for more details on configuring `enzyme`. + 3rd Party Adapters ============= diff --git a/docs/api/mount.md b/docs/api/mount.md index 6e5bd5c9d..cd286ee7b 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -8,7 +8,7 @@ want to run your tests inside of a browser, the recommended approach to using `m on a library called [jsdom](https://github.com/tmpvar/jsdom) which is essentially a headless browser implemented completely in JS. -**Note**: unlike shallow or static rendering, full rendering actually mounts the component in the DOM, which means that tests can affect each other if they are all using the same DOM. Keep that in mind while writing your tests and, if necessary, use [`.unmount()`](ReactWrapper/unmount.md) or something similar as cleanup. +**Note**: unlike shallow or static rendering, full rendering actually mounts the component in the DOM, which means that tests can affect each other if they are all using the same DOM. Keep that in mind while writing your tests and, if necessary, use [`.unmount()`](ReactWrapper/unmount.md) or something similar as cleanup. You can also automate this via a lifecycle hook with [mount tracking](../installation/mount-tracking.md). ```jsx import { mount } from 'enzyme'; diff --git a/docs/installation/README.md b/docs/installation/README.md index d2cd67de6..ff24ac617 100644 --- a/docs/installation/README.md +++ b/docs/installation/README.md @@ -17,3 +17,5 @@ although neither library is a dependency of enzyme. {% include "./react-014.md" %} {% include "./react-013.md" %} + +{% include "./mount-tracking.md" %} \ No newline at end of file diff --git a/docs/installation/mount-tracking.md b/docs/installation/mount-tracking.md new file mode 100644 index 000000000..486afda6f --- /dev/null +++ b/docs/installation/mount-tracking.md @@ -0,0 +1,60 @@ +# Automatic mount tracking + +If you are wanting to use enzyme in a large-scale application, you may want to automate +calls to `unmount()` via a lifecycle hook in your test environment, rather than at the +individual test level. Enzyme allows for this as part of its configuration: + +ES6: +```js +// setup file +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ + adapter: new Adapter(), + enableMountTracking: true, +}); +``` + +```js +// test file +import { shallow, mount } from 'enzyme'; + +const wrapper = mount(); +``` + +```js +// test file (in a lifecycle hook) +import { unmountAllWrappers } from 'enzyme'; + +unmountAllWrappers(); +``` + +ES5: + +```js +// setup file +var enzyme = require('enzyme'); +var Adapter = require('enzyme-adapter-react-16'); + +enzyme.configure({ + adapter: new Adapter(), + enableMountTracking: true, +}); +``` + + +```js +// test file +var enzyme = require('enzyme'); + +var wrapper = enzyme.mount(); +``` + + +```js +// test file (in a lifecycle hook) +var enzyme = require('enzyme'); + +enzyme.unmountAllWrappers(); +```