Most of the exercises do have tests and they can help through the material. You don't have to run the test if you don't want to, but they can help!

Running the tests:

npm test

This will start Jest in watch mode. You choose the file that you want using the P key on your keyboard. Read the output and play around with it.

The tests are there to help you reach the final version, however sometimes you can accomplish the task, and the tests still fail if you implement things differently than I do in my solution, so don't look to them as a complete authority.

Initially, all tests will pass, that's not what you want. You want the test to tell you that you haven't finished the exercise yet. You're going to want to disable the final import and enable the exercise file.

And that's all that you're going to need to do in the test file!

You won't want to change anything else unless you're making a pull request.

Note

Not all of the files are tested. For example, we can't test the HTML files without adding complex tooling.

Transcript

Kent C. Dodds: 0:00 Another thing you might find useful as you're working through this stuff is we also have tests. Not all of the files have tests, but most of the exercises do have tests. They can help you work along your way. I'm going to show you that you don't have to run the tests if you don't want to, but they can be helpful.

0:17 I'm going to open up another terminal here. I'll run npm run test, or npm test, or npm t. All of those will do the same thing. It starts up just in watch mode. We'll talk about that in another one of our workshops. All that you need to know about here is the ability to filter by a filename regex pattern.

0:37 Let's say that I'm working on exercise five, so I typed 05. You can use the arrow keys on your keyboard to select a specific one. If I just use this one, then I can say, "OK, 05 is the one I want to run." That will run the test.

0:52 It's passing, but that's probably not what you want. You want the test to tell you that you haven't finished the exercise yet. If you open up the test, you'll notice that the test is importing from final...Let me pop this open a lot bigger.

1:06 Here we're importing app from final.05. The reason that it's doing that is because when you cloned and ran the setup script, we wanted to make sure that all of the tests would pass with the final version, so that we know that you got everything set up properly.

1:20 If you are going to use the test, then before you work through any of these workshops, you're going to want to disable the final import and enable the exercise import. That way, we're going to import from your file. That's all that you're going to need to do in the test file. You won't want to change anything else in here unless you're making a pull request, in which case, knock yourself out. That's great.

1:43 With that in place now, we can take a look at the output. Here's Alfred the Alert telling us, "Hey, one of the boxes is missing the class name box," and it's giving us the output. It's saying, "Hey, one of these is missing it," so you should probably add that.

1:57 There will be some helpful errors. Some error messages may not be super helpful. If you want to improve those for a case that you think is pretty common, then more power to you. You'll get added to the README, it'll be awesome, so thank you for all the people who contribute these.

2:12 That's basically all that you do. You run npm test or npm t and you choose the file that you want using the P key on your keyboard. You update the test import in here from the final to the exercise. You're off to the races. You can start working through things.

2:32 In addition to being able to just run the app and make sure the things look the same, you can also have the tests running that are giving you constant feedback that, "Oh there's some additional stuff that you need to do here."

2:44 Another thing to keep in mind here is that not all of our files are tested. For example, we can't reasonably test the HTML files without adding a whole bunch of tooling and things to make it really complicated. Luckily, there are only four of them. You don't need to worry about that, hopefully.

3:02 Most of our stuff is tested. In fact, some of our extra credits are also tested. Here you can go to extra-2. You'll notice this is importing from final/extra-2, and you'll need to switch that to exercise06. The reason for that is the extra credit sometimes adds additional features that I can't just test the final version by itself. We have special tests for some of those.

3:27 That's the test. Hopefully, that's helpful to you. Have a fun time running all these tests.