Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Test React Components that use React Hooks

    Kent C. DoddsKent C. Dodds

    React 16.7.0-alpha.0 was recently released and with it comes a set of experimental hooks and features. Use these with caution as they are likely to change in the near future.

    Testing our <Counter /> React Component that uses the useState hook is actually very straightforward with react-testing-library. Let's give it a whirl!

    reactReact
    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 Here we have a simple counter that uses the use-state hook. Let's go ahead and get this tested. I'm going to import that counter from counter, and then we'll make a test that says that counter increments the count.

    00:14 Now we're going to want to render that. Let's go ahead and we'll import render from React Testing Library. When we render it, we're going to want to use React from React to use JSX. Then we'll say counter right here.

    00:33 In our counter -- this is a pretty contrived example, but -- the first item, or the first child is the button, so we'll go ahead and just do that. We'll say const-container equals render.

    00:43 We'll say const-button equals container.firstchild. Then we can go ahead and fire a click event.

    00:50 Let's bring in fireEvent. We'll say fireEvent.click on the button, and we'll expect the button.textContent to be one. Cool, we got our test pass in there. Let's make sure that it can fail, so that our assertion actually is running. Cool.

    01:11 Let's go ahead and add another assertion here that initializes to zero, and we're all set. As you can see here, React's Testing Library allows us to write our tests that are free of implementation details. It works whether our counter is a cost component or a function component that uses React hooks.

    01:28 In review, all that we needed to do was bring in React, React Testing Library and the counter component, then we rendered and got the container for that counter. We got the first child, which was the button. Then we expected that the button's contents were zero. We fired a click event and then expected it to be one.

    Discuss

    Discuss