Exploring the Sample App for the Redux Testing Course

Jamund Ferguson: Head over to the sample repo for this course in GitHub and make sure to select the testing branch from the list of branches. From there, click the Code button and copy the URL to clone the repo. Then, in a terminal window, wherever you'd like to work, type git clone and paste in that URL.

If you, like me, have already downloaded this repo for one of my other Redux courses, you may have this code checked out. I recommend typing redux-testing to create a folder specifically for this course. Cd into that folder.

Now, make sure you check out the testing branch by typing git checkout testing. From here, type npm install. When that's done, you can type npm run dev to launch the application we'll be testing. We'll go ahead and open that up here.

You can see, I've got a store here with a Products page, where you can add various items to your cart, and then a Cart page, where you can change the quantity, remove items and, finally, check out. That's our shop.

Let's take a look at our code base. The main thing we want to look at here is our src folder. Inside the src folder, you have an App.tsx file, which contains the three main routes of our application -- the Home route, the Products route and the Cart route.

The components for our Cart and Products page live inside the features folder alongside all related components. Here's Products.tsx, which loads our Products page. Here's Cart.tsx, which loads our Cart page. You can see that, beside each of these, we have a slice file.

The slice file's where all of our Redux logic lives for that part of the app, and it's where a lot of our testing will be focused.

Here is our productsSlice, and here is our cartSlice. Both of our slices here rely on the Redux toolkit helper to set up the reducers, thunks and selectors, but the techniques we'll be using to test them work just fine even if you're creating these by hand.

The other thing to note about our application is that it's built with Vite. Vite is what provides a super fast app refresh and module compilation that you'll see as you begin working in the application. You'll also notice here that we're using TypeScript throughout the application instead of plain old JavaScript.

That being said, pretty much all the techniques we talked about will translate perfectly into JavaScript. If you haven't already watched the course about how we built this application, I'd recommend starting there. Either way, let's get to testing.