redux: Including Checks for a Redux Reducer

Jamund Ferguson: Within Merchandise, within the Options folder, create a brand new document known as productslice.take a look at.ts. Now let’s open up productslice.ts and spot what it’s that we’re going to be trying out. In case you take a look at this document, there is truly now not so much occurring right here, excluding for this one reducer manner once we obtain new merchandise.

You’ll see that it takes a payload with an array of goods. It converts them into an object, which will get stored at the inside Redux state for this slice. Let’s move forward and take a look at it now.

Again in productslice.take a look at.ts, import productsReducer from ./productSlice. We additionally need to import a named export known as productsReceived. Now, underneath that, sort describe. We’re going to be describing the productsReducer, move an error serve as. Then we’re going to write a easy serve as that claims, “It must go back the preliminary state and handed an empty motion”. That is probably the most elementary take a look at we will be able to do on our reducer.

We’re going to say const initialState = undefined; const motion = { sort: “” }; const end result = productsReducer(initialState, motion). In the end, I be expecting(end result).toEqual, and on this case, it will equivalent empty object with the important thing of goods that still has an empty object within that.

Save that. Open up the terminal window. We’re going to sort npx jest — productsSlice. We simply need to run the assessments related to this document. You’ll see that it handed.

For our subsequent take a look at, we are going to get started through making a duplicate of the primary one. We’re going to say it, on this case, it will say, “Must convert the goods won to an object”. To get this to paintings, we are going to wish to import our merchandise from public/merchandise.json.

The ones are the mock information that we are the usage of on our server. We’re going to use them in our assessments as neatly. Right here, for our initialState in our take a look at, we’re going to stay it as undefined. For motion, we are going to say productsReceived(merchandise). The end result remark’s the similar.

For our be expecting remark, this clearly is not going to paintings anymore as a result of we think it to in truth have merchandise. We’re going to say be expecting(Object.keys(end result.merchandise).period) to equivalent merchandise.period.

This must have the similar choice of merchandise saved within the ensuing state as was once present in our preliminary array. Now let’s ascertain that the entire merchandise have the appropriate knowledge. We’re going to say, merchandise.forEach.

For each and every product, we can be expecting end result.merchandise, product.ID to equivalent the present product that we are having a look at. Each and every unmarried one of the goods in our mock merchandise knowledge, the one that we use to energy the site, all of the ones wish to exist right here in our ensuing merchandise in our redux retailer.

We’re going to open up command line, rerun the ones assessments, and seems we wish to import won merchandise relatively than merchandise won. No large deal. We will alternate that right here. npx jest –productSlice. Either one of the ones move. Now check out what this provides us on the subject of our code policy.

I sort npx jest –coverage, after which — productSlice. We’re going to see the policy generated simplest through trying out this document. Open up that policy file and you’ll see now that there is a little little bit of policy right here within the merchandise folder and that our product slice is in truth one hundred pc examined.