Skip to content

Commit

Permalink
[Docs] shallow/mount instance: update wording to account for hooks
Browse files Browse the repository at this point in the history
Co-authored-by: Kevin Wang <kwangsan@gmail.com>
Co-authored-by: Jordan Harband <ljharb@gmail.com>
  • Loading branch information
thiskevinwang and ljharb committed Aug 1, 2019
1 parent 404bcc5 commit 0e39e1f
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 29 deletions.
29 changes: 15 additions & 14 deletions docs/api/ReactWrapper/instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,57 @@

Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.

NOTE: With React `16` and above, `instance()` returns `null` for stateless functional components.

NOTE: can only be called on a wrapper instance that is also the root instance. With React `16` and above, `instance()` returns `null` for functional components, regardless of [hooks](https://reactjs.org/docs/hooks-intro.html) usage.

#### Returns

`ReactComponent|DOMComponent`: The retrieved instance.


#### Example

<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->

```jsx
function Stateless() {
return <div>Stateless</div>;
function SFC() {
return <div>MyFunction</div>;
}

class Stateful extends React.Component {
render() {
return <div>Stateful</div>;
return <div>MyClass</div>;
}
}
```

#### React 16.x

```jsx
test('mount wrapper instance should be null', () => {
const wrapper = mount(<Stateless />);
test('wrapper instance is null', () => {
const wrapper = mount(<SFC />);
const instance = wrapper.instance();

expect(instance).to.equal(null);
});

test('mount wrapper instance should not be null', () => {
test('wrapper instance is not null', () => {
const wrapper = mount(<Stateful />);
const instance = wrapper.instance();

expect(instance).to.be.instanceOf(Stateful);
expect(instance).to.be.instanceOf(MyCStatefullass);
});
```

#### React 15.x

```jsx
test('mount wrapper instance should not be null', () => {
const wrapper = mount(<Stateless />);
test('wrapper instance is not null', () => {
const wrapper = mount(<SFC />);
const instance = wrapper.instance();

expect(instance).to.be.instanceOf(Stateless);
expect(instance).to.be.instanceOf(SFC);
});

test('mount wrapper instance should not be null', () => {
test('wrapper instance is not null', () => {
const wrapper = mount(<Stateful />);
const instance = wrapper.instance();

Expand Down
31 changes: 16 additions & 15 deletions docs/api/ShallowWrapper/instance.md
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
# `.instance() => ReactComponent`

Returns the single-node wrapper's node's underlying class instance; `this` in its methods.

NOTE: can only be called on a wrapper instance that is also the root instance. With React `16` and above, `instance()` returns `null` for stateless functional components.
Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.

NOTE: can only be called on a wrapper instance that is also the root instance. With React `16` and above, `instance()` returns `null` for functional components, regardless of [hooks](https://reactjs.org/docs/hooks-intro.html) usage.

#### Returns

`ReactComponent|DOMComponent`: The retrieved instance.


#### Example

<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->

```jsx
function Stateless() {
return <div>Stateless</div>;
function SFC() {
return <div>MyFunction</div>;
}

class Stateful extends React.Component {
render() {
return <div>Stateful</div>;
return <div>MyClass</div>;
}
}
```

#### React 16.x

```jsx
test('shallow wrapper instance should be null', () => {
const wrapper = shallow(<Stateless />);
test('wrapper instance is null', () => {
const wrapper = shallow(<SFC />);
const instance = wrapper.instance();

expect(instance).to.equal(null);
});

test('shallow wrapper instance should not be null', () => {
test('wrapper instance is not null', () => {
const wrapper = shallow(<Stateful />);
const instance = wrapper.instance();

expect(instance).to.be.instanceOf(Stateful);
expect(instance).to.be.instanceOf(MyCStatefullass);
});
```

#### React 15.x

```jsx
test('shallow wrapper instance should not be null', () => {
const wrapper = shallow(<Stateless />);
test('wrapper instance is not null', () => {
const wrapper = shallow(<SFC />);
const instance = wrapper.instance();

expect(instance).to.be.instanceOf(Stateless);
expect(instance).to.be.instanceOf(SFC);
});

test('shallow wrapper instance should not be null', () => {
test('wrapper instance is not null', () => {
const wrapper = shallow(<Stateful />);
const instance = wrapper.instance();

Expand Down

0 comments on commit 0e39e1f

Please sign in to comment.