diff --git a/README.md b/README.md index 76f616d..c315fa0 100644 --- a/README.md +++ b/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) diff --git a/react/spelunking-through-components-with-enzymes-dive.md b/react/spelunking-through-components-with-enzymes-dive.md new file mode 100644 index 0000000..d1781c1 --- /dev/null +++ b/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 }) =>

Hello {name}!

; + +const HelloContainer = (props) => ( +
+ +
+); +``` + +If we are to shallow render the above component using Enzyme, we'll only see +things one layer deep: + +```javascript +const wrapper = shallow(); +// wrapper ~=
+``` + +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(); +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