Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Dispatching Actions" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Next Brian updates the tests to utilize the Redux store and actions. He wraps the Search component in a Provider so it can have access to the store. He also updates the setting of the search term, so it dispatches a Redux action. - https://github.com/btholt/complete-intro-to-react/tree/fem-24

Get Unlimited Access Now

Transcript from the "Dispatching Actions" Lesson

[00:00:00]
>> Brian Holt: What I do wanna show you though if you're interested in still testing that user interaction, we don't really have a good way of testing directly on that input anymore. Because we don't have access to header the way that we used to.
>> Brian Holt: We could try and figure it out but that would be kinda tough so let's try this instead.

[00:00:27]
>> Brian Holt: So I'm gonna show you how, what we can do is we can actually dispatch an action to redux and see, based on dispatching an action to redux, if we get the correct results. And let's go ahead and give that a shot. So unfortunately we're gonna have to kind of set up redux here in the process.

[00:00:45] So we're gonna have to import, actually this is gonna have to go above it, here import Provider from react-redux. And we're also going to have to import MemoryRouter from react-router-dom. So in order for our search component to not just out and out fail, we're gonna have to give it a router because it has a link component in the header.

[00:01:20] And we're going to have to give it a provider so that we can provide the store to it. And we're also going to have to import store from ./store.
>> Brian Holt: Okay, I'm gonna get rid of this and what we're gonna do is we're gonna do a shallow rendering with memory router on the outside.

[00:01:52] No, provider on the outside. Provider store equals store.
>> Brian Holt: And then MemoryRouter inside of that.
>> Brian Holt: Okay.
>> Brian Holt: And that's the other thing we need to do. So we're gonna get rid of this simulate change thing. I actually think we don't even need memory router, now that I'm thinking about it.

[00:02:36] But let's keep going. We're gonna do, store.dispatch up here. So we are actually going to dispatch an action directly to the store. We're gonna send as setSearchTerm. So we'd have to go and input that as well, searchWord. So let's go up to the top and inport that as well.

[00:03:00] So we're gonna say import {SetSearchTerm } from './actionCreators'.
>> Brian Holt: Okay, then we're gonna do the show countdown here and expect it's gonna work exactly the same way. So now that I'm thinking about, let's go make sure this actually works first. So we're gonna say yarn test.
>> Brian Holt: Cannot find module store.

[00:03:33] That's right, cuz we're gonna have to do dot dot, and also dot dot there. Cuz we're inside the test directory, so we have to go up one. At this point shallow's actually not going to be enough for us to kinda get everything that we need out of here.

[00:03:49] So we're gonna get rid of shallow and we're gonna keep shallow as well, for the first two tests, but we're gonna use render for the last test. Which is gonna be a deeper, actually render out all of the markup.
>> Brian Holt: Okay, then down here, wanna change shallow to render.

[00:04:12]
>> Brian Holt: And now that we're actually going to fully render out everything, we actually can't do this kind of find anymore, cuz it's not gonna know what a React component and what's not cuz it's actually gonna render out all to markup. So we're gonna have to give it a CSS selector and we're gonna do .show-cards, is what we called it.

[00:04:33]
>> Brian Holt: And actually, we have to go add that as well so we can hook into it. So open your show-card really quick
>> Brian Holt: And here where it says Wrapper to we're just gonna say className='show-card'.
>> Brian Holt: So this is in show-card. Now if we go back to our test search.spec.jsx, search.spec.jsx, this one.

[00:05:08]
>> Brian Holt: Now this should work. Coming back to yarn test.
>> Brian Holt: There we go, now it passes. Now I hope you're looking at this as like, this is a lot of intimate knowledge to have about this component to test it. It is. So I'm gonna go ahead and assert while this is a valid test, it does test something, I'm not a huge fan of it.

[00:05:31] I actually liked what we had better before where we were just passing in the search term and seeing that it worked given that particular props. But if you wanna test integration there between redux and passing in the store, and passing in the action, and then getting something out of it.

[00:05:46] In that particular sense, this is how you're going to do that. But the sum of my entire story here is, once you introduce redux, your React components become a lot tougher to test, significantly tougher to test. So that's something to be aware of. The flip side of that is what I am about to show you after this is that the Redux parts of it, so the actual state management part becomes way easier to test.

[00:06:12] So you are kind of trading one for the other. And, I am gonna go ahead and assert that the state management part is actually the important part to test. Again we've been doing this for three days and we've had to rewrite our tests already twice, that kind of sucks, right?

[00:06:29] Rewriting tests is one of my least favorite things to do.
>> Brian Holt: Okay so any questions about that?
>> Brian Holt: It's up to you which one you prefer, which one you actually are interested in testing. There's no reason that you couldn't have both tests as well. So, and what that would look like.

[00:06:51] Let's just, what I can do here is I can just copy this
>> Brian Holt: And let's go back to where it was before.
>> Brian Holt: Back when we were doing shallow without provider.
>> Brian Holt: Let's see, I think this was fine right there. So let's copy this test case. And after this, I'll push a branch, so you can have both of them as well.

[00:07:36] And you can kind of compare them
>> Brian Holt: So this is gonna be without Redux. And this one is going to be with Redux. And now we say yarn test. Make sure that both of those pass the way we expect them to, and now we have an extra test.

[00:08:03] One to test with Redux and one without. So you're welcome to make, I probably would not write both of these tests, but it's good to demonstrate to you what's going on with various strategies of testing these components. Something worth noting. Search should render, based on without Redux takes 1 millisecond, with Redux it's gonna take 35 milliseconds.

[00:08:28] Why is that? It's not Redux. Redux is plenty fast, it's the render. This call right here render, wherever it is, render, this is expensive, cuz this is actually going to render everything out to a string, and it has js dom built in, it does all sorts of stuff for you.

[00:08:45] So that's something to keep in mind, the more you use render, the slower it's gonna be. Render is still pretty fast, but as soon as you start getting into static rendering, it gets really slow really fast, so.