Please note that @testing-library/user-event version 14 has made all APIs async and the workshop material has been updated to use the latest version of that package. So you'll need to make all tests async and use await when using that package.

Transcript

Kent C. Dodds: 0:00 When you're building React applications, you're going to have a lot of hooks and components that you're going to want to test. Let me just say really quick that most of your hooks and components should be covered by integration tests rather than individualized component or hook tests or unit tests.

0:17 The only hooks and components you really should be testing are those of the reusable variety. That's what we're going to be doing in this exercise.

0:25 For a little bit of background, I give you some blog posts and other things to think about when we're talking about testing, components and hooks. I give you some examples of how you accomplish testing components and hooks using React Testing Library as well as react-hooks-testing-library.

0:40 Feel free to take a look at all the resources and examples that I have for you here. Pay close attention to this act function, which are going to use quite a bit in testing your hook. For this exercise, you're going to be testing the modal components and the useAsync custom hook.

0:56 In our efforts to avoid testing implementation details you should be testing your components in the way you would expect them to be used. Keep that in mind as you test the component.

1:07 For useAsync you're going to want to learn a little bit about asymmetric matchers, which allow you to assert properties of objects. Definitely take a look at the docs for that, if that's something you're not familiar with.

1:20 That's it for the exercise, and then we're going to expand on our hook test to improve that a little bit in this extra credit. That will be it. Have a good time with this one, and we'll see you on the other side of the exercise.