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.
Instructor: [00:00] Shallow rendering is useful to constrain yourself to testing a component as a unit and to ensure that your test aren't indirectly asserting a behavior of child components.
[00:11] Let's go ahead and import shallow from Enzyme. Then let's create our first describe block with our app component. Inside this, we'll make an it block that just renders our app component.
[00:24] Next, we'll do a const wrapper = shallow app component. Perfect.
[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.
I was having trouble getting things running, but once I created the project with create-react-app and ignored the advice to replace the test script in the package.json file with jest, I was finally able to start seeing the results shown in the video.
I don't understand, how can you pass a test when there is no expect? Shouldn't you be adding expect(wrapper).toMatchSnapshot(); ?
Is it true that we shouldn't use arrow functions with mocha? Are we even using mocha in this context or is describe here referring to something else?
Getting ReferenceError: bool is not defined when adding context and disableLifecycleMethods to the wrapper function. Has anyone else seen this?
To anyone having issues with bool being undefined I believe it's pseudocode here.
Use true or false 👍
Why is it returning me the following error after running the script
npm test