Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Test a Component That Uses a React Context Consumer

    Dave CeddiaDave Ceddia
    reactReact
    ^16.6.0

    Consuming a Context in a component can make it tricky to test, because it requires an invisible Provider outside the scope of the component being tested. In this lesson you’ll learn how to test a component that uses a Context Consumer.

    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 This messageViewer component uses the email consumer. It expect to be rendered inside an email context. Let's see how we can test this. First, we'll yarn add react-testing-library. Then we can run yarn test to start up our test watcher.

    00:15 Then our project will create an tests directory underneath source. Inside there, we'll create a messageViewer.test.js file. In here, we'll import react, because we're going to be using JSX, and import render and fireEvent from react-testing-library.

    00:38 We'll also want to import emailContext from email-context. This'll be the full context object, not just the provider. Then we'll import messageViewer, which is the component we're testing. Let's write a test for when we're viewing this email.

    00:52 We should see the subject in the header, and this body in the div. We'll write a test, view an email, then we'll call render, and render out an emailContext.provider, with a messageViewer inside. Into this provider, we'll pass a value prop, setting currentEmail to some fake email, which we'll create up top.

    01:13 We have to give it a subject and a body. We'll destructure this render call to pull out the container. Then we can write our assertions. We can expect the container.querySelector on the h2 and the textContent from that. This should equal email.subject.

    01:32 Save this, and we get an error, because the path to messageViewer's wrong. Fix that, and now, our test is passing. Then we can write another assertion for the body. We'll expect container.querySelector h2 plus div.

    01:46 The div after the h2, and the textContent in there to equal email.body. When we save, the test still passes. Now, let's add another test for the back button. I'll say test backButton, and we're going to need a mock callback function here, which we can create with jest.fn.

    02:05 Then I'll copy and paste our render from the test above, because this one's going to be really similar. We'll just add a second property to this object, which is onSelectEmail, and pass in our mock callback. Now, we can click the button with fireEvent.click, and pass in container.querySelector button.

    02:27 After that, we can expect for mock callback to be called with null. Now, we can save, and this test works, too.

    Discuss

    Discuss