Skip to content
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

Add ShallowWrapper#unmount #215

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
* [closest(selector)](/docs/api/ShallowWrapper/closest.md)
* [shallow()](/docs/api/ShallowWrapper/shallow.md)
* [render()](/docs/api/ShallowWrapper/render.md)
* [unmount()](/docs/api/ShallowWrapper/unmount.md)
* [text()](/docs/api/ShallowWrapper/text.md)
* [html()](/docs/api/ShallowWrapper/html.md)
* [get(index)](/docs/api/ShallowWrapper/get.md)
Expand Down
34 changes: 34 additions & 0 deletions docs/api/ShallowWrapper/unmount.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# `.unmount() => Self`

A method that unmounts the component. This can be used to simulate a component going through
an unmount/mount lifecycle.

#### Returns

`ShallowWrapper`: Returns itself.



#### Example

```jsx
const spy = sinon.spy();

class Foo extends React.Component {
constructor(props) {
super(props);
this.componentWillUnmount = spy;
}
render() {
return (
<div className={this.props.id}>
{this.props.id}
</div>
);
}
}
const wrapper = shallow(<Foo id="foo" />);
expect(spy.calledOnce).to.equal(false);
wrapper.unmount();
expect(spy.calledOnce).to.equal(true);
```
3 changes: 3 additions & 0 deletions docs/api/shallow.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,9 @@ Shallow renders the current node and returns a shallow wrapper around it.
#### [`.render() => CheerioWrapper`](ShallowWrapper/render.md)
Returns a CheerioWrapper of the current node's subtree.

#### [`.unmount() => ShallowWrapper`](ShallowWrapper/unmount.md)
A method that un-mounts the component.

#### [`.text() => String`](ShallowWrapper/text.md)
Returns a string representation of the text nodes in the current render tree.

Expand Down
10 changes: 10 additions & 0 deletions src/ShallowWrapper.js
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,16 @@ export default class ShallowWrapper {
return this.type() === null ? cheerio() : cheerio.load(this.html()).root();
}

/**
* A method that unmounts the component. This can be used to simulate a component going through
* and unmount/mount lifecycle.
* @returns {ShallowWrapper}
*/
unmount() {
this.renderer.unmount();
return this;
}

/**
* Used to simulate events. Pass an eventname and (optionally) event arguments. This method of
* testing events should be met with some skepticism.
Expand Down
13 changes: 7 additions & 6 deletions src/react-compat.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint react/no-deprecated: 0 */
import { REACT013 } from './version';
import objectAssign from 'object.assign';

let TestUtils;
let createShallowRenderer;
Expand Down Expand Up @@ -80,27 +81,27 @@ if (REACT013) {
// shallow rendering when it's just a DOM element.
createShallowRenderer = function createRendererCompatible() {
const renderer = TestUtils.createRenderer();
const originalRender = renderer.render;
const originalRenderOutput = renderer.getRenderOutput;
let isDOM = false;
let _node;
return {
_instance: renderer._instance,
return objectAssign(renderer, {
render(node, context) {
if (typeof node.type === 'string') {
isDOM = true;
_node = node;
} else {
isDOM = false;
renderer.render(node, context);
this._instance = renderer._instance;
return originalRender.call(this, node, context);
}
},
getRenderOutput() {
if (isDOM) {
return _node;
}
return renderer.getRenderOutput();
return originalRenderOutput.call(this);
},
};
});
};
renderIntoDocument = TestUtils.renderIntoDocument;
childrenToArray = React.Children.toArray;
Expand Down
24 changes: 24 additions & 0 deletions test/ShallowWrapper-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1644,6 +1644,30 @@ describe('shallow', () => {

});

describe('.unmount()', () => {
it('should call componentWillUnmount()', () => {
const spy = sinon.spy();

class Foo extends React.Component {
constructor(props) {
super(props);
this.componentWillUnmount = spy;
}
render() {
return (
<div className={this.props.id}>
{this.props.id}
</div>
);
}
}
const wrapper = shallow(<Foo id="foo" />);
expect(spy.calledOnce).to.equal(false);
wrapper.unmount();
expect(spy.calledOnce).to.equal(true);
});
});

describe('.render()', () => {

it('should return a cheerio wrapper around the current node', () => {
Expand Down