Skip to content

Commit

Permalink
Adds documentation for mount tracking
Browse files Browse the repository at this point in the history
  • Loading branch information
TzviPM committed Aug 9, 2018
1 parent dbbc15f commit 378f0c5
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 1 deletion.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
=============

Expand Down
2 changes: 1 addition & 1 deletion docs/api/mount.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 2 additions & 0 deletions docs/installation/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,5 @@ although neither library is a dependency of enzyme.
{% include "./react-014.md" %}

{% include "./react-013.md" %}

{% include "./mount-tracking.md" %}
60 changes: 60 additions & 0 deletions docs/installation/mount-tracking.md
Original file line number Diff line number Diff line change
@@ -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(<Foo />);
```

```js
// test file (in a lifecycle hook)
import { unmountAllWrappers } from 'enzyme';

unmountAllWrappers();
```

ES5:
<!-- eslint no-var: 0 -->
```js
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-16');

enzyme.configure({
adapter: new Adapter(),
enableMountTracking: true,
});
```

<!-- eslint no-var: 0 -->
```js
// test file
var enzyme = require('enzyme');

var wrapper = enzyme.mount(<Foo />);
```

<!-- eslint no-var: 0 -->
```js
// test file (in a lifecycle hook)
var enzyme = require('enzyme');

enzyme.unmountAllWrappers();
```

0 comments on commit 378f0c5

Please sign in to comment.