Skip to content

Commit 0e39e1f

Browse files
thiskevinwangljharb
andcommitted
[Docs] shallow/mount instance: update wording to account for hooks
Co-authored-by: Kevin Wang <[email protected]> Co-authored-by: Jordan Harband <[email protected]>
1 parent 404bcc5 commit 0e39e1f

File tree

2 files changed

+31
-29
lines changed

2 files changed

+31
-29
lines changed

docs/api/ReactWrapper/instance.md

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,57 @@
22

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

5-
NOTE: With React `16` and above, `instance()` returns `null` for stateless functional components.
6-
5+
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.
76

87
#### Returns
98

109
`ReactComponent|DOMComponent`: The retrieved instance.
1110

12-
1311
#### Example
1412

1513
<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->
14+
1615
```jsx
17-
function Stateless() {
18-
return <div>Stateless</div>;
16+
function SFC() {
17+
return <div>MyFunction</div>;
1918
}
2019

2120
class Stateful extends React.Component {
2221
render() {
23-
return <div>Stateful</div>;
22+
return <div>MyClass</div>;
2423
}
2524
}
2625
```
2726

2827
#### React 16.x
28+
2929
```jsx
30-
test('mount wrapper instance should be null', () => {
31-
const wrapper = mount(<Stateless />);
30+
test('wrapper instance is null', () => {
31+
const wrapper = mount(<SFC />);
3232
const instance = wrapper.instance();
3333

3434
expect(instance).to.equal(null);
3535
});
3636

37-
test('mount wrapper instance should not be null', () => {
37+
test('wrapper instance is not null', () => {
3838
const wrapper = mount(<Stateful />);
3939
const instance = wrapper.instance();
4040

41-
expect(instance).to.be.instanceOf(Stateful);
41+
expect(instance).to.be.instanceOf(MyCStatefullass);
4242
});
4343
```
4444

4545
#### React 15.x
46+
4647
```jsx
47-
test('mount wrapper instance should not be null', () => {
48-
const wrapper = mount(<Stateless />);
48+
test('wrapper instance is not null', () => {
49+
const wrapper = mount(<SFC />);
4950
const instance = wrapper.instance();
5051

51-
expect(instance).to.be.instanceOf(Stateless);
52+
expect(instance).to.be.instanceOf(SFC);
5253
});
5354

54-
test('mount wrapper instance should not be null', () => {
55+
test('wrapper instance is not null', () => {
5556
const wrapper = mount(<Stateful />);
5657
const instance = wrapper.instance();
5758

docs/api/ShallowWrapper/instance.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,58 @@
11
# `.instance() => ReactComponent`
22

3-
Returns the single-node wrapper's node's underlying class instance; `this` in its methods.
4-
5-
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.
3+
Returns the single-node wrapper's node's underlying class instance; `this` in its methods. It must be a single-node wrapper.
64

5+
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.
76

87
#### Returns
98

109
`ReactComponent|DOMComponent`: The retrieved instance.
1110

12-
1311
#### Example
1412

1513
<!-- eslint react/prop-types: 0, react/prefer-stateless-function: 0 -->
14+
1615
```jsx
17-
function Stateless() {
18-
return <div>Stateless</div>;
16+
function SFC() {
17+
return <div>MyFunction</div>;
1918
}
2019

2120
class Stateful extends React.Component {
2221
render() {
23-
return <div>Stateful</div>;
22+
return <div>MyClass</div>;
2423
}
2524
}
2625
```
2726

2827
#### React 16.x
28+
2929
```jsx
30-
test('shallow wrapper instance should be null', () => {
31-
const wrapper = shallow(<Stateless />);
30+
test('wrapper instance is null', () => {
31+
const wrapper = shallow(<SFC />);
3232
const instance = wrapper.instance();
3333

3434
expect(instance).to.equal(null);
3535
});
3636

37-
test('shallow wrapper instance should not be null', () => {
37+
test('wrapper instance is not null', () => {
3838
const wrapper = shallow(<Stateful />);
3939
const instance = wrapper.instance();
4040

41-
expect(instance).to.be.instanceOf(Stateful);
41+
expect(instance).to.be.instanceOf(MyCStatefullass);
4242
});
4343
```
4444

4545
#### React 15.x
46+
4647
```jsx
47-
test('shallow wrapper instance should not be null', () => {
48-
const wrapper = shallow(<Stateless />);
48+
test('wrapper instance is not null', () => {
49+
const wrapper = shallow(<SFC />);
4950
const instance = wrapper.instance();
5051

51-
expect(instance).to.be.instanceOf(Stateless);
52+
expect(instance).to.be.instanceOf(SFC);
5253
});
5354

54-
test('shallow wrapper instance should not be null', () => {
55+
test('wrapper instance is not null', () => {
5556
const wrapper = shallow(<Stateful />);
5657
const instance = wrapper.instance();
5758

0 commit comments

Comments
 (0)