This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Testing Redux: Dispatching Actions" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) 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. Code for the application up to this pint is on the v2-22 branch.

Get Unlimited Access Now

Transcript from the "Testing Redux: Dispatching Actions" Lesson

>> Brian Holt: That was a fairly easy one to fix. These get progressively a little bit tougher to fix each time because they have more and more dependency on Redux.
>> Brian Holt: So one thing that you'll probably just notice from this is that as soon as we integrate Redux, it makes React a lot harder to test.

[00:00:22] Yeah, go ahead?
>> Speaker 2: What was that thing you did to get rid of the Babel cache?
>> Brian Holt: --no-cache.
>> Brian Holt: We have to fake out Redux. [LAUGH] We have to make Redux think it's there. So what we're actually gonna do, is we're gonna import Provider,
>> Brian Holt: From react-redux, and we're going to import down here,

>> Brian Holt: store from ./store, okay?
>> Brian Holt: We're also gonna have to import from our action creators. import,
>> Brian Holt: setSearchTerm from ./actionCreators. And in addition to getting shallow, we're also going to grab render now because we need that extra depth to get this to work the way that we expect it to.

>> Brian Holt: Okay, so come back to your second test and uncomment that.
>> Brian Holt: Just have to make this a little bit more robust now.
>> Brian Holt: Sorry. Does this one work already?
>> Brian Holt: Or did I just not include the things to make that work?
>> Brian Holt: Search is not defined.
>> Brian Holt: All right, we'll leave this one comment out for a second.

[00:02:37] And we're gonna go onto the third one, cuz that's the one I have up here that we've been working on. So search house = 'house', and what we're going to do here, let's just,
>> Brian Holt: We're gonna do store.dispatch,
>> Brian Holt: setSearchTerm to be searchWord.
>> Brian Holt: Okay, or do const component = render, okay?

[00:03:18] And then we have to wrap it with Provider, right? Because otherwise, Provider's not gonna be there. store ={store}.
>> Brian Holt: And <Search),
>> Brian Holt: <Search, right?
>> Brian Holt: shows,
>> Brian Holt: ={preload.shows},
>> Brian Holt: And </Provider>, okay? So that's gonna get us our component. Then we're gonna do const showCount. We'll come down here, grab this.

>> Brian Holt: That's all well and good.
>> Brian Holt: And then this expect down here. We're gonna bring this up here. Unfortunately, we can't do the ShowCard trick anymore, so that's not gonna work. So we're just gonna give it the class that we're gonna look for in CSS, which is .show-card.

[00:04:34] Not bad, but not quite as nice as it used to be.
>> Speaker 3: What's providing search?
>> Brian Holt: Yeah, you need to import that, as well. So you need to grab it from here.
>> Brian Holt: Think that works.
>> Brian Holt: Make sure that works.
>> Speaker 3: Doesn't that have to be inside?
>> Brian Holt: Preloads are not defined.

>> Speaker 4: Your preloads?
>> Brian Holt: Right there, okay?
>> Brian Holt: Cool, so the answer is, no, this doesn't have to be in inside. Because this is the default that we're grabbing, right? These are named imports. This is the default import.
>> Brian Holt: Okay, so that makes that test pass.
>> Brian Holt: This one, do I just need to change this to unwrapped?

>> Brian Holt: <UnwrappedSearch searchTerm= ' ' blank. And shows={preload.shows}. This probably should still work.
>> Brian Holt: Yep, that's all you need to do, so, all of that.
>> Brian Holt: So, like I said, this makes React a lot harder to test because it's harder to pull apart Redux and React. They come a little bit more married than they used to be.

[00:06:49] Well, they used to be not married at all, but it used to be a little bit easier to test React. But we're still relatively testing the same thing. Whilst it gets a little bit harder, this still is not awful, right? It's still not bad.
>> Brian Holt: So, here, we're just dispatching an action, externally, to the store, and then we're just testing the result of that.