Skip to content

Commit

Permalink
Add documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
minznerjosh committed Jan 4, 2019
1 parent cead0a4 commit e675ca9
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 70 deletions.
2 changes: 1 addition & 1 deletion SUMMARY.md
Expand Up @@ -100,6 +100,7 @@
* [forEach(fn)](/docs/api/ReactWrapper/forEach.md)
* [get(index)](/docs/api/ReactWrapper/get.md)
* [getDOMNode()](/docs/api/ReactWrapper/getDOMNode.md)
* [getWrappingComponent()](/docs/api/ReactWrapper/getWrappingComponent.md)
* [hasClass(className)](/docs/api/ReactWrapper/hasClass.md)
* [hostNodes()](/docs/api/ReactWrapper/hostNodes.md)
* [html()](/docs/api/ReactWrapper/html.md)
Expand All @@ -124,7 +125,6 @@
* [render()](/docs/api/ReactWrapper/render.md)
* [setContext(context)](/docs/api/ReactWrapper/setContext.md)
* [setProps(nextProps[, callback])](/docs/api/ReactWrapper/setProps.md)
* [setProviders(providers)](/docs/api/ReactWrapper/setProviders.md)
* [setState(nextState[, callback])](/docs/api/ReactWrapper/setState.md)
* [simulate(event[, data])](/docs/api/ReactWrapper/simulate.md)
* [simulateError(error)](/docs/api/ReactWrapper/simulateError.md)
Expand Down
44 changes: 44 additions & 0 deletions docs/api/ReactWrapper/getWrappingComponent.md
@@ -0,0 +1,44 @@
# `.getWrappingComponent() => ReactWrapper`

If a `wrappingComponent` was passed in `options`, this methods returns a `ReactWrapper` around the rendered `wrappingComponent`. This `ReactWrapper` can be used to update the `wrappingComponent`'s props, state, etc.


#### Returns

`ReactWrapper`: A `ReactWrapper` around the rendered `wrappingComponent`



#### Examples

```jsx
import { Provider } from 'react-redux';
import { Router } from 'react-router';
import store from './my/app/store';
import mockStore from './my/app/mockStore';

function MyProvider(props) {
const { children, customStore } = props;

return (
<Provider store={customStore || store}>
<Router>
{children}
</Router>
</Provider>
);
}

const wrapper = mount(<MyComponent />, {
wrappingComponent: MyProvider,
});
const provider = wrapper.getWrappingComponent();
provider.setProps({ customStore: mockStore });
wrapper.update(); // update root wrapper after wrappingComponent props changed
```



#### Common Gotchas

- Your root wrapper _will not_ automatically `update()` when the state/props of your `wrappingComponent` are changed. If you expect your component to render differently after calling `.setState()`/`.setProps()` on your `wrappingComponent`, you'll need to manually call `update()` on your root wrapper.
65 changes: 0 additions & 65 deletions docs/api/ReactWrapper/setProviders.md

This file was deleted.

8 changes: 4 additions & 4 deletions docs/api/mount.md
Expand Up @@ -49,7 +49,7 @@ describe('<Foo />', () => {
- `options.context`: (`Object` [optional]): Context to be passed into the component
- `options.attachTo`: (`DOMElement` [optional]): DOM Element to attach the component to.
- `options.childContextTypes`: (`Object` [optional]): Merged contextTypes for all children of the wrapper.
- `options.providers`: (`Array<ReactElement>` [optional]): Provider elements (from React's new context API) that will provide context to the mounted node
- `options.wrappingComponent`: (`ComponentType` [optional]): A component that will render as a parent of the `node`. It can be used to provide context to the `node`, among other things. See the [`getWrappingComponent()` docs](ReactWrapper/getWrappingComponent.md) for an example. **Note**: `wrappingComponent` _must_ render its children.

#### Returns

Expand Down Expand Up @@ -172,12 +172,12 @@ Manually sets props of the root component.
#### [`.setContext(context) => ReactWrapper`](ReactWrapper/setContext.md)
Manually sets context of the root component.

#### [`.setProviders(providers) => ReactWrapper`](ReactWrapper/setProviders.md)
Manually sets values of React's new context API.

#### [`.instance() => ReactComponent|DOMComponent`](ReactWrapper/instance.md)
Returns the wrapper's underlying instance.

#### [`.getWrappingComponent() => ReactWrapper`](ReactWrapper/getWrappingComponent.md)
Returns a wrapper representing the `wrappingComponent`, if one was passed.

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

Expand Down
4 changes: 4 additions & 0 deletions packages/enzyme-adapter-utils/src/RootFinder.jsx
@@ -1,6 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';

/**
* This component is a utility to assist in the finding of the root component
* when the component is mounted in a wrappingComponent.
*/
export default class RootFinder extends React.Component {
render() {
const { children } = this.props;
Expand Down
3 changes: 3 additions & 0 deletions packages/enzyme-adapter-utils/src/createMountWrapper.jsx
Expand Up @@ -92,6 +92,8 @@ export default function createMountWrapper(node, options = {}) {
}

getComponentParentInstance() {
// If a wrappingComponent was provided, the root node's parent will be the
// RootFinder component (see render()).
if (WrappingComponent) {
if (!this.rootFinderInstance) {
throw new Error('`wrappingComponent` must render its children!');
Expand All @@ -100,6 +102,7 @@ export default function createMountWrapper(node, options = {}) {
return this.rootFinderInstance;
}

// Otherwise, this component is the root node's parent!
return this;
}

Expand Down
7 changes: 7 additions & 0 deletions packages/enzyme/src/ReactWrapper.js
Expand Up @@ -227,6 +227,13 @@ class ReactWrapper {
return this.single('instance', () => this[NODE].instance);
}

/**
* If a `wrappingComponent` was passed in `options`, this methods returns a `ReactWrapper` around
* the rendered `wrappingComponent`. This `ReactWrapper` can be used to update the
* `wrappingComponent`'s props, state, etc.
*
* @returns ReactWrapper
*/
getWrappingComponent() {
if (this[ROOT] !== this || this[RENDERER] === this[WRAPPING_COMPONENT_RENDERER]) {
throw new Error('ReactWrapper::getWrappingComponent() can only be called on the root');
Expand Down

0 comments on commit e675ca9

Please sign in to comment.