Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Test React Component Lifecycle Methods with Enzyme

    Tyler ClarkTyler Clark

    There are times when our React components use lifecycle methods like componentDidMount. In this lesson we will make sure that we write tests to make sure that these methods are called. This includes testing that our component utilizes componentWillReceiveProps correctly.

    reactReact
    ^16.0.0
    jestJest
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 When we work with React components, we sometimes utilize lifecycle methods to help conditionally render our components. It is helpful to use the Enzyme to test that these lifecycles are called appropriately while testing their purpose inside of our components.

    00:15 We'll start a new test. Well, say, it calls componentDidMount, and then into this block we'll jest.spyOn(ourApp.prototype, 'componentDidMount'), then const wrapper = shallow(ourApp) components. We'll expect that (ourApp.prototype.componentDidMount.mock.calls.length).toBe(1).

    00:34 Jest's spyOn method gives this ability to mock out the componentDidMount method inside of our app component. With this mock in place, we can test for this lifecycle to be called once.

    00:50 Now, you might have assumed that this test would pass automatically because componentDidMount fires when the component is rendered. However, it is failing because it cannot find this method on our component.

    01:01 We can easily make this test pass by adding an empty componentDidMount method on our component. Once we save it, we can see that now all of our test pass.

    01:12 If we added a lifecycle property to our state and updated that inside of our componentDidMounts, we can actually utilize this lifecycle method. We'll add a p-tag with a class name of lifecycle and print whatever our lifecycle state is.

    01:27 Now with that in place, we can do another expect. We'll find our p-tag by the lifecycle class. Grab the text, and make sure that that equals componentDidMount. We'll update our title and we'll save it off.

    01:41 Inside of our terminal, we can see that our only failing tests are our snapshot tests that we've done. If we update those, our tests are passing, including calls componentDidMount.

    01:52 Now, in another test we've written, we've set props to test some come conditional content. We can take that once step further and test a corresponding lifecycle method. If we wrote it setProps calls componentWillReceiveProps, then inside of this block, we'll do jest.spyOn(app.prototype.componentWillReceiveProps).

    02:10 Const wrapper = shallow(ourApp) component. Wrapper.setProps, we'll make a height to true. We'll expect that app.prototype.componentWillReceiveProps.mock.calls.lenght is one.

    02:30 Again, we use Jest's spyOn method to mock out componentWillReceiveProps lifecycle method. When we use this setProps method from Enzyme, it's going to call componentWillReceiveProps. Our tests will fail because this method does not exist yet on our class.

    02:48 Similar to componentDidMounts, we can simply add componentWillReceiveProps onto our class. This will be enough to pass our test.

    02:58 Let's take this one step further and update the state lifecycle property to now say componentWillReceiveProps, then we'll write a new expect where we'll expect that wrapper.find(ourLifecycleClass) p-tags is now componentWillReceiveProps.

    03:16 Once we save this and grab our terminal again, all of our tests are still passing. If we rerun this, they still pass, including our new test setProps calls componentWillReceiveProps.

    Discuss

    Discuss