Kent C. Dodds: 0:00 Another thing that comes up again and again when we're testing React applications is dealing with components that consume context and how we can test those components that are consuming that context.

0:11 This context could be coming from your own application. You have your own context provider, or you could be using a third-party library that exposes context, and you're using components that are supposed to be wrapped inside of that context.

0:25 I give you a little bit of background on the way that we do this. Basically, the idea is the component's not going to work very well if the provider isn't there, so you simply provide the provider. In the router case, that'd be the router. If you're using Emotion's ThemeProvider, then you just wrap that component that needs the ThemeProvider in the provider.

0:47 There's something special that we do with React Testing Library to make things like re-render work properly. I give you an example of how to do that with the wrapper option here. You can go ahead and read into that. Learn about that a little bit because you're going to be doing this in the exercise.

1:05 I also show you the typical way that you set this up for your application. You don't even have to worry about the wrapper option for most of your tests, and you just have that wrapper and all of those providers provided for you just automatically. It works out really awesome. We're going to learn about that in this exercise.

1:23 The test file that we're going to be running is this 07.js where we've got the easyButton. We can take a look at that easyButton implementation right here. Then we can also look at the rendered implementation right here on that easyButton page.

1:39 We can look at the rendered version of this. Basically, we just have hit the easyButton. We click on easy, says that was easy. Then the thing in particular that matters in our context here is we have a ThemeProvider. We can toggle that theme to go back and forth between black and white.

1:57 What we want to test in particular is this easyButton that happens to care about what the current theme is, which we're getting from this useTheme. Let's dive into that useTheme here really quick and get the holistic picture of what's going on.

2:11 The ThemeProvider here is coming from this ThemeContext . We have this useTheme hook that consumes that context. Then we have a ThemeProvider that we are supposed to wrap any usage of the useTheme hook in so that it has access to the value that we're providing right here.

2:29 If we don't provide the ThemeProvider to a component that's using this useTheme hook, then we're going to get an error. That's exactly what will happen. If you uncomment all of this stuff, then you'll see this giant error saying, "UseTheme should be used within a ThemeProvider."

2:48 Your job is to render this within a ThemeProvider and then follow along with these extra credits to make things even better as we go. Have a good time with this, and I'll see you on the other side of the exercise.