Exploring the Sample App for the Redux Testing Course
All of the code for this application can be found in the redux-shopping-cart github repo, specifically in the testing branch. An explanation for how it was built can be found by completing the Modern Redux with RTK and TypeScript course on egghead.
To quickly summarize a few of the things you need to know to be successful:
-
This app is built with Redux Toolkit which has a slightly different syntax than standard Redux, however the testing examples should all work seamlessly in any Redux application
-
The app is built on top of vite instead of the more popular create react app. The benefit of vite is that it installs and builds extremely quickly. One of the downsides of vite is that it doesn't come with any out-of-the-box testing support. It also has its own esbuild-based compiler, which is not currently compatible with jest, so we have to configure JSX & TypeScript support for jest even though
vitehandles it already. -
Almost all of the key files for the project are found in the
src/featuresfolder. "Slice" files are a Redux Toolkit convention and they contain all the redux code for that part of the application. -
You can get the app started by typing
npm run devand opening your browser to http://localhost:3000/.
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.