Add Spelunking Through Components With Enzyme's Dive as a react til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_676 TILs and counting..._
+_677 TILs and counting..._
 
 ---
 
@@ -479,6 +479,7 @@ _676 TILs and counting..._
 - [Quickly Search For A Component With React DevTools](react/quickly-search-for-a-component-with-react-devtools.md)
 - [Read Only Input Elements](react/read-only-input-elements.md)
 - [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md)
+- [Spelunking Through Components With Enzyme's Dive](react/spelunking-through-components-with-enzymes-dive.md)
 - [Sync Your react-router State With Redux](react/sync-your-react-router-state-with-redux.md)
 - [Test Files In create-react-app](react/test-files-in-create-react-app.md)
 - [Upgrading To The Latest React In CodeSandbox](react/upgrading-to-the-latest-react-in-codesandbox.md)

react/spelunking-through-components-with-enzymes-dive.md

@@ -0,0 +1,39 @@
+# Spelunking Through Components With Enzyme's Dive
+
+Most of the components we write have other components nested in them.
+
+```javascript
+const Hello = ({ name }) => <h1>Hello {name}!</h1>;
+
+const HelloContainer = (props) => (
+  <div>
+    <Hello {...props} />
+  </div>
+);
+```
+
+If we are to shallow render the above component using Enzyme, we'll only see
+things one layer deep:
+
+```javascript
+const wrapper = shallow(<HelloContainer name="World" />);
+// wrapper ~= <div><Hello name="World" /></div>
+```
+
+If we'd like to explore a particular child of the rendered component
+further, we can do a little
+[`find`](http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html) and
+[`dive`](http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html).
+
+```javascript
+const wrapper = shallow(<HelloContainer name="World" />);
+const helloWrapper = wrapper.find(Hello).dive();
+expect(helloWrapper.text()).toEqual("Hello World!");
+```
+
+This allows us to make pinpoint assertions about how our components render
+without mounting the entire thing.
+
+See a [live example here](https://codesandbox.io/s/y236wr1kn1).
+
+h/t Vidal Ekechukwu