React Testing Library with Redux - Configuration

what's going on guys so if you go to write tests for your react application with react testing library and your react app is using redux you might run into this problem you write a simple test you do npm run test and it fails could not find store in the context of the connect sign up so the connect function for redux either wrap the root component in a provider or pass a custom rat context provider to provider and the corresponding react context consumer to connect sign up in connect options so in your application you you have a provider for your store that's wrapped around your app or your components that are using redux but in your test there is no provider you're just testing the individual component so you're going to have to bring a provider into your test and then wrap that around your component so you actually have to bring in a provider from react redux react redux and you're essentially going to have to do a provider with your component in there which for me is the sign up component that i'm testing here and then toss in your store as well but we have to do a little bit of configuration to bring our store in we can customize this render method to include this provider and any component that we send into it and then bring in our own store as well so this render method that we're bringing in we'll say we'll rename it as react testing library render and then we'll do our own render method where we send in our component and that'll return this react testing library render which will return this and instead of having to put our individual component in there we'll just we'll have to wrap that in brackets here so we're sending in our component wrapping the provider around it and then this render works with this and we just test like we normally would now to pass in our store we have to do some configuration here i have all of my store and like my root reducer in my index js as i think a lot of people do when they first set up redux so what i had to do is put a reducer file and a store file and then export those so if we go to source new file we'll say reducer.js oh let me stop this from let me go back to our index we want to pull in our code for configuring our reducer let's combine reducers and importing the individual reducers so i'll actually just grab all this paste that in here and export that we need to bring in combine reducers which we'll just take out of here as well so that's coming from redux and then we want to bring in this root reducer back into our index well now actually we'll be moving so we want to set up our store and then export the store as a function from a separate file so we'll be bringing it into there so last thing to do here is create a store.js in our source folder and then we want to bring in everything that configures our store i'll bring in all this actually i think we need this line yeah we'll need this one in this file sorry but yeah we'll be importing the store into here so all this will bring into here bring in these as well and we'll need the persist reducer from redux persist by the way i'm using redux persist and your redux setup might not be exactly the same you might not have the uh redux persist with this persist gate and everything you might just have the provider but the setup will still be the same you'll outsource your reducer and your store and then bring it into here and into your tests so that was import from redux persist and then we need to bring in our root reducer put that down here and then we'll turn the store into a function and export it so we can bring it in to other places and you could pass in your initial state there too if needed export default store save that in our index we will import store from our store file and now that was a function so we'll just need to call this function and these and lastly in our tests we want to bring in import store from oh i got to go up a level our store file and then call that function here and now if we npm run test oh awkward ah well it helps if you save the file now if we run the test there it is test passed so yeah now you can just write tests like normal and we just kind of customize the render method and i have a another video where it takes more configuration but you would do this in a separate file and then import that and your test you don't have to set this up in every test where you're wrapping your component you can just kind of do it like you normally would and then your tests are a lot cleaner because you don't have to do that i'll put a link to that video in the description so hope this helped you out and that's all for today thank you for watching [Music] you

Channel: TechCheck

Views: 375

Rating: 5 out of 5

Keywords:

Id: 8Qfz5EFG9gQ

Length: 10min 48sec (648 seconds)

Published: Sun Aug 01 2021