-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds Mount tracking #1730
base: master
Are you sure you want to change the base?
Adds Mount tracking #1730
Changes from all commits
d7652db
b67930d
fa10fbb
e8c43db
2b88a6b
dbbc15f
378f0c5
f07fc9c
ee9a91e
5d17f6e
78193fe
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
# Wrapper sandboxing | ||
|
||
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(), | ||
enableSandbox: 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(), | ||
enableSandbox: 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(); | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,7 @@ import { | |
sym, | ||
} from 'enzyme/build/Utils'; | ||
import getAdapter from 'enzyme/build/getAdapter'; | ||
import * as wrapperSandbox from 'enzyme/build/wrapperSandbox'; | ||
|
||
import './_helpers/setupAdapters'; | ||
import { | ||
|
@@ -75,6 +76,15 @@ describe('shallow', () => { | |
expect(wrapper.children().type()).to.equal('div'); | ||
expect(wrapper.children().props().bam).to.equal(undefined); | ||
}); | ||
|
||
it('should call trackWrapper', () => { | ||
const spy = sinon.spy(); | ||
const originalTrackWrapper = wrapperSandbox.trackWrapper; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same here |
||
wrapperSandbox.trackWrapper = spy; | ||
shallow(<p>foo</p>); | ||
expect(spy).to.have.property('callCount', 1); | ||
wrapperSandbox.trackWrapper = originalTrackWrapper; | ||
}); | ||
}); | ||
|
||
describe('context', () => { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
import { expect } from 'chai'; | ||
import sinon from 'sinon'; | ||
import { ReactWrapper, configure } from 'enzyme'; | ||
import { get } from 'enzyme/build/configuration'; | ||
|
||
import { | ||
trackWrapper, | ||
unmountAllWrappers, | ||
} from 'enzyme/build/wrapperSandbox'; | ||
|
||
const originalConfig = get(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this should probably be populated |
||
|
||
describe('wrapperSandbox', () => { | ||
afterEach(() => { | ||
configure(originalConfig); | ||
}); | ||
|
||
it('does what i expect', () => { | ||
const wrapper = new ReactWrapper(<p>foo</p>); | ||
const spy = sinon.spy(); | ||
wrapper.unmount = spy; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
trackWrapper(wrapper); | ||
unmountAllWrappers(); | ||
// default configuration is not to track wrappers | ||
expect(spy).to.have.property('callCount', 0); | ||
|
||
configure({ enableSandbox: true }); | ||
trackWrapper(wrapper); | ||
unmountAllWrappers(); | ||
// default configuration is not to track wrappers | ||
expect(spy).to.have.property('callCount', 1); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { get } from './configuration'; | ||
|
||
const wrappers = new Set(); | ||
|
||
/** | ||
* Stores a reference to a testing wrapper for later unmounting | ||
* via unmountAllWrappers() | ||
* | ||
* @param {ReactWrapper|ShallowWrapper} wrapper | ||
*/ | ||
export function trackWrapper(wrapper) { | ||
const { enableSandbox } = get(); | ||
if (enableSandbox) { | ||
wrappers.add(wrapper); | ||
} | ||
} | ||
|
||
/** | ||
* Unmounts all sandboxed Enzyme wrappers. | ||
* | ||
* Usually, this can be run once for an entire test suite after all each test | ||
* (and its nested hooks)have been run. However, in some cases this may need | ||
* to be run this manually.This is most commonly needed when a component uses | ||
* timeouts/ animation frames that are mocked for tests; in that case, waiting | ||
* until after you have restored those globals will lead to their stored | ||
* identifiers being invalid. | ||
*/ | ||
export function unmountAllWrappers() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i kind of feel like if |
||
wrappers.forEach(wrapper => wrapper.unmount()); | ||
wrappers.clear(); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
eesh, this is a really brittle test that will definitely break in babel 7 and when node ships native ESM support. is this necessary? can we instead test the actual behavior?