1. 20
    Applying our Redux Test Helpers to an Existing Component Test
    57s

Applying our Redux Test Helpers to an Existing Component Test

Jamund Ferguson
InstructorJamund Ferguson
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 2 years ago

In this lesson we try on the updated renderWithContext function. The updated version allows preloadedState to be passed in as its second argument and return a store property which we destructure off of the response.

Because we don't have access to the store until after we render any data we want our components to access on initial render will we need to be included it as part of the preloadedState.

Instructor: [0:00] Open up cartlink.test.tsx and import render with context from test details. Remove this file's own render with context function at the bottom of the file. Without that we can now get rid of all these extra imports we no longer need. Now start up just in watch mode.

[0:15] You can see that our tests are almost working here. The only issue is instead of relying on the global store, when I render with context, I receive a new store and I can add items to the cart just after that initial render. You can see that our tests are now passing again.

[0:30] We can also preload items into our store with our new getState with items utility. At the top of the file, import getState with items for test details. In the test block, type const state = getState with items, and then pass in an object with test item one.

[0:45] We can then pass that state in as the second argument to our render with context function and remove our add to cart action. That's how we use our new test utils to render components with a pre-populated Redux store.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today