Shallow Render a React Component with Enzyme

In this lesson we will shallow render a component and pass through different config options. Shallow rendering is useful to test components as individual units. This helps ensure that tests aren’t indirectly asserting on behavior of child components. We’ll also use the debug method to show how we can easily view our component for debugging purposes.

00:30 As I mentioned, shallow rendering is easy to use when working with the component itself. It's not going to chase rendering child components. We could see what this shallow rendered component looks like by using the debug method on the wrapper.

00:44 Now let's go ahead and check out this app component, see what it looks like. This is the create-react-app static app component. This is what we expect to see inside of our terminal when we run our test script.

00:59 Our test will run and we'll see a console.log with the shallow rendered component here. As you can see, it's the same from what we see in our file.

01:10 Now to test the rendering of children, we can create a quick react functional component called test that renders a div with testing. If we place this inside of our app component, we can see this new rendered log, and then it's not chasing the div testing child component here.

01:34 We also have the ability to pass through some configurations to our shallow rendered component. Our second parameter here is going to be an object with a context property, as well as a disable life cycle methods property.

01:49 As you probably guessed, this is how we can provider context to our rendered component if we care about that in our test. This disable life cycle methods property with the bool value is how we could tell Enzyme to ignore the component.mountlifecyclemethod. The component.update is also not called after setProps and setContext is used.