Transcript

Kent C. Dodds: 0:00 We're going to start out with a simple test with React DOM for your first exercise. I'll give you a little bit of background. This is stuff that we should be thinking about throughout the entire workshop and through every time that you ever test anything.

0:14 That is, specifically, the more your tests resemble the way your software is used, the more confidence they can give you. Everything that you're doing and testing should be doing something to align the way that you're writing your automated test in the same way that your software is going to be used.

0:30 That's what our test is going to do here. You can go ahead and read through some of this. We've got an example of how we're going to render our component using React DOM. The component that we're going to be testing is this counter. We can increment and decrement.

0:47 Just by me interacting with this, I know exactly how I want to test this. Here, the first thing I did was click the Increment button and I noticed that the count was incremented. I clicked the Decrement button and I noticed that the count was decremented.

1:00 That's what our test is going to do. Make sure that the current count number is correct based on us clicking the Increment and Decrement buttons. In here, we're going to be using some Jest assertions that you'll want to take a look at. If you're not familiar with Jest, feel free to check that out.

1:19 Let's go ahead and open up the 01.js. We've got our emoji friends here to help us get started on that. We're importing the counter from the component's counter. You can go ahead and open that up and explore that if you want to see how this is implemented.

1:35 The way that it's implemented shouldn't have any bearing on the way that you test it. You shouldn't actually have to check the way that things are implemented most of the time. With that, let's go ahead and run npm t to get our test running. We'll hit p01. Come down here to our exercise. Now, our test is running for the exercise.

1:55 You may have noticed that we do have an extra credit for this one. Come down here and go ahead and play with that extra credit as well. I'll see you on the other side of this exercise.