Skip to content

Commit

Permalink
Add documentation note clarifying shallow prop functions
Browse files Browse the repository at this point in the history
  • Loading branch information
kevinzwhuang committed Sep 13, 2016
1 parent 08f97a2 commit 1234880
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 9 deletions.
32 changes: 27 additions & 5 deletions docs/api/ShallowWrapper/prop.md
@@ -1,22 +1,44 @@
# `.prop(key) => Any`

Returns the prop value for the node of the current wrapper with the provided key.
Returns the prop value for the root node of the wrapper with the provided key.
`.prop(key)` can only be called on a wrapper of a single node.

NOTE: can only be called on a wrapper of a single node.
NOTE: When called on a shallow wrapper, `.prop(key)` will only return values for props that exist for the parent element of the component, not the whole React component. To return the props for the
entire React component, use `wrapper.instance().props`. See [`.instance() =>
ReactComponent`](instance.md)

#### Arguments

1. `key` (`String`): The prop name such that this will return value will be the `this.props[key]`
of the component instance.
of the parent element of the component.



#### Example


```jsx
const wrapper = shallow(<MyComponent foo={10} />);
expect(wrapper.prop('foo')).to.equal(10);
const MyComponent = React.createClass({
render() {
return (
<div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
)
}
})
const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.prop('includedProp')).to.equal("Success!");

// Warning: .prop(key) only returns values for props that exist in the parent element.
// See the note above about wrapper.instance().props to return all props in the React component.

wrapper.prop('includedProp');
// "Success!"

wrapper.prop('excludedProp');
// undefined

wrapper.instance().props.excludedProp;
// "I'm not included"
```


Expand Down
29 changes: 25 additions & 4 deletions docs/api/ShallowWrapper/props.md
@@ -1,16 +1,37 @@
# `.props() => Object`

Returns the props hash for the current node of the wrapper.
Returns the props hash for the root node of the wrapper. `.props()` can only be called on a wrapper of a single node.

NOTE: can only be called on a wrapper of a single node.
NOTE: When called on a shallow wrapper, `.props()` will only return the
props for the parent element in the component, not the whole React component. To return the props for the
entire React component, use `wrapper.instance().props`. See [`.instance() =>
ReactComponent`](instance.md)


#### Example


```jsx
const wrapper = shallow(<MyComponent foo={10} />);
expect(wrapper.props().foo).to.equal(10);
const MyComponent = React.createClass({
render() {
return (
<div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
)
}
})
const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.props().includedProp).to.equal("Success!");

// Warning: .props() only returns props that are passed to the parent element,
// which does not include excludedProp in this example.
// See the note above about wrapper.instance().props.

wrapper.props();
// {children: "Hello", className: "foo bar", includedProp="Success!"}

wrapper.instance().props;
// {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"}

```


Expand Down

0 comments on commit 1234880

Please sign in to comment.