Intro to Configure Jest for Testing JavaScript Applications

Instructor: 0:00 What is up, folks? I'm super excited to teach you about my favorite testing tool. It's called Jest. It's amazing. We're going to learn how to use that tool, configure it. It is going to blow your mind. Let's go ahead and take a look at the project structure, so you get an idea of what we are looking at here.

0:16 Here, we have a pretty simple project. I'm going to go ahead and start by running npm run dev. This will start up our dev-server. We're just using regular webpack. We're not even using create React app or anything. I wanted to do regular webpack, so I could show you a couple of things that you might see when you're building your own apps.

0:33 In here, the first thing that you'll see right up here is that we're running at localhost:8080. If you open up localhost:8080 right here, then you'll see our app. It's a pretty simple app. It's just a calculator here that you can add a couple numbers together. The project itself has all of the things that you're going to run into when you're configuring Jest and that's what we're going for here.

0:55 Another thing that you're going to want to know is if we look at our branches, you're going to have a bunch of tjs.Jest- and then a number. These are all in order, so if you want to follow along, that's totally cool. Just make sure that you're installing the same version of dependencies that we install in the project if you want to have the exact same experience.

1:14 If you get stuck or get fallen behind or something, then you can just check out the same branch that I'm on for each one of these exercises. There will be a link on each one of the exercise pages showing you the diff of the code changes that we're going to be making as we go.

1:28 The way the source files are structured is we have to /src directory and then we have our index, which is the entry for our app. Then we have our App.js, which is going to just render the calculator and then we have the calculator which is where most of our code resides. Then we have a couple of shared things in here.

1:43 We have webpack configured to treat the shared directory like a node modules directory, which means that our calculator can import calculator display. It's going to resolve to this calculator display here. That's a pretty common thing to do in bigger projects, so we have to do something special for Jest to handle that kind of situation which is why I have it included in here.

2:04 You'll notice we also have CSS modules and there's something special we have to do with Jest, so that we can handle those properly. We're also going to migrate some of this stuff to CSS and JS with Emotion. You can see what Jest has to offer for that kind of setup.

2:19 We've got a ton of stuff going on in these modules and I'm super excited to get started. Let's go.