Skip to content

Commit

Permalink
[Docs] shallow: .prop(key w/ child component of wrapper and func
Browse files Browse the repository at this point in the history
It was not immediately obvious to me that if `.prop(key)` returned a function,  that you could pass that function parameters and test the effect of calling the function with those parameters. I hoping this would help make that possibility more clear to other React testing newbies.
  • Loading branch information
Oscar-21 authored and ljharb committed Mar 2, 2018
1 parent b21ff0d commit 98c0196
Showing 1 changed file with 30 additions and 5 deletions.
35 changes: 30 additions & 5 deletions docs/api/ShallowWrapper/prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,28 @@ of the root node of the component.

```jsx
import PropTypes from 'prop-types';

function MyComponent({ includedProp }) {
return (
<div className="foo bar" includedProp={includedProp}>Hello</div>
);
import ValidateNumberInputComponent from './ValidateNumberInputComponent';

class MyComponent extends React.Component {
state = {
number: 0;
};

onValidNumberInput = this.onValidNumberInput.bind(this);
onValidNumberInput(e) {
const number = e.target.value;
if (!number || typeof number === 'number') {
this.setState(() => ({ number }));
}
};

render {
return (
<div className="foo bar" includedProp={includedProp}>
<ValidateNumberInputComponent onChangeHandler={onValidNumberInput} />
</div>
);
}
}
MyComponent.propTypes = {
includedProp: PropTypes.string.isRequired,
Expand All @@ -33,6 +50,14 @@ MyComponent.propTypes = {
const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
expect(wrapper.prop('includedProp')).to.equal('Success!');

const validInput = 1;
wrapper.find('ValidNumberInputComponent').prop('onChangeHandler')(validInput);
expect(wrapper.state('number')).to.equal(number);

const invalidInput = 'invalid input';
wrapper.find('ValidNumberInputComponent').prop('onChangeHandler')(invalidInput);
expect(wrapper.state('number')).to.equal(0);

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

Expand Down

0 comments on commit 98c0196

Please sign in to comment.