Make the Shallow Rendering example clearer (#8269)
* Make the Shallow Rendering example clearer I was reading through the documentation, and I found that the `render` call on the `renderer` was missing. * Use a regular function to define MyComponent
Michele Bertoli committed
Nov 11, 2016 at 15:34 UTC
53e45e78e42501b769e81af561059af826208853
1 file changed
+12
-6
docs/docs/addons-test-utils.md
+12
-6
@@ -53,20 +53,26 @@ Call [`createRenderer()`](#createrenderer) in your tests to create a shallow ren
53
54
After `shallowRenderer.render()` has been called, you can use [`shallowRenderer.getRenderOutput()`](#shallowrenderer.getrenderoutput) to get the shallowly rendered output.
55
56
-You can then begin to assert facts about the output. For example, if your component's render method returns:
56
+You can then begin to assert facts about the output. For example, if you have the following component:
57
58
```javascript
59
-<div>
60
- <span className="heading">Title</span>
61
- <Subcomponent foo="bar" />
62
-</div>
59
+function MyComponent() {
60
+ return (
61
+ <div>
62
+ <span className="heading">Title</span>
63
+ <Subcomponent foo="bar" />
64
+ </div>
65
+ );
66
+}
67
```
68
69
Then you can assert:
70
71
```javascript
72
const renderer = ReactTestUtils.createRenderer();
69
-result = renderer.getRenderOutput();
73
+renderer.render(<MyComponent />);
74
+const result = renderer.getRenderOutput();
75
+
76
expect(result.type).toBe('div');
77
expect(result.props.children).toEqual([
78
<span className="heading">Title</span>,