diff --git a/docs/api/ShallowWrapper/instance.md b/docs/api/ShallowWrapper/instance.md index 95e7eadae..487a34eac 100644 --- a/docs/api/ShallowWrapper/instance.md +++ b/docs/api/ShallowWrapper/instance.md @@ -2,20 +2,62 @@ Gets the instance of the component being rendered as the root node passed into `shallow()`. -NOTE: can only be called on a wrapper instance that is also the root instance. +NOTE: can only be called on a wrapper instance that is also the root instance. With React `16.x`, `instance()` returns `null` for stateless React component/stateless functional components. See example: +#### Returns (React 16.x) +- `ReactComponent`: The stateful React component instance. +- `null`: If stateless React component was wrapped. -#### Returns +#### Returns (React 15.x) -`ReactComponent`: The component instance. +- `ReactComponent`: The component instance. +#### Example + +#### Preconditions + +```jsx +function Stateless() { + return
Stateless
; +} + +class Stateful extends React.Component { + render() { + return
Stateful
; + } +} +``` +#### React 16.x +```jsx +test('shallow wrapper instance should not be null', () => { + const wrapper = shallow(); + const instance = wrapper.instance(); + expect(instance).not.to.be.instanceOf(Stateless); +}); -#### Example +test('shallow wrapper instance should not be null', () => { + const wrapper = shallow(); + const instance = wrapper.instance(); + expect(instance).to.be.instanceOf(Stateful); +}); +``` +#### React 15.x ```jsx -const wrapper = shallow(); -const inst = wrapper.instance(); -expect(inst).to.be.instanceOf(MyComponent); +test('shallow wrapper instance should not be null', () => { + const wrapper = shallow(); + const instance = wrapper.instance(); + + expect(instance).to.be.instanceOf(Stateless); +}); + +test('shallow wrapper instance should not be null', () => { + const wrapper = shallow(); + const instance = wrapper.instance(); + + expect(instance).to.be.instanceOf(Stateful); +}); ``` + diff --git a/docs/api/ShallowWrapper/props.md b/docs/api/ShallowWrapper/props.md index 477696c4f..3af5fd8f3 100644 --- a/docs/api/ShallowWrapper/props.md +++ b/docs/api/ShallowWrapper/props.md @@ -5,13 +5,13 @@ called on a wrapper of a single node. NOTE: When called on a shallow wrapper, `.props()` will return values for props on the root node that the component *renders*, not the component itself. -To return the props for the entire React component, use `wrapper.instance().props`. -See [`.instance() => ReactComponent`](instance.md) +To return the props for the entire React component, use `wrapper.instance().props`. This is valid for stateful or stateless components in React `15.*`. But, `wrapper.instance()` will return `null` for stateless React component in React `16.*`, so `wrapper.instance().props` will cause an error in this case. See [`.instance() => ReactComponent`](instance.md) -#### Example +#### Example ```jsx + import PropTypes from 'prop-types'; function MyComponent(props) { @@ -34,8 +34,11 @@ expect(wrapper.props().includedProp).to.equal('Success!'); console.log(wrapper.props()); // {children: "Hello", className: "foo bar", includedProp="Success!"} -console.log(wrapper.instance().props); +console.log(wrapper.instance().props); // React 15.x - working as expected // {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"} + +console.log(wrapper.instance().props); +// React 16.* - Uncaught TypeError: Cannot read property 'props' of null ```