React Redux Unit & Integration Testing with Jest and Enzyme #7 – Connected Components

Within this series you will learn how to test:

• Connected and unconnected components
• Component state and Redux state
• Action creators and reducers
• Complex action creators that use Redux Thunk and Axios
• Action creators called from connected components

Links:

Project YouTube Playlist:

Project Repo:

Social Media & GitHub

[sunmonu-adedejiolawale]

Hands down the best tutorial watched on youtube for Testing with React, Redux... Awesome stuff bro

[adrianamoni]

This is just perfect. I really are a good teacher. There are a lot of people who know a lot of stuff but don't have the skills to teach like you do! Thank you

[Razephon]

I'm doing this series in parallel with my own test project. I wasn't clear on how to use Dive until now. Thanks!

[haihoangpham]

Thank you for your video. However, I have another solution for this which we do not need to downgrade the redux version. We can use mount instead of shallow and add <Provider store={store}><App /></Provider> instead of <App store={store}/>. So the solution can be like this:
describe('App Component', () => {
const initialState = {
posts: [{
title: 'Example title 1',
body: 'Some text'
}, {
title: 'Example title 2',
body: 'Some text'
}, {
title: 'Example title 3',
body: 'Some text'
}]
}


let component;


beforeEach(()=>{
const store = testStore(initialState);
component = mount( <Provider store={store}><App /></Provider> )
})


it('Should render without errors', () => {
const wrapper = findByTestAtrr(component, 'appComponent');

})
})

[redblaze]

Thanks a lot man! Very helpful videos. Keep on going!

[MrAndykofi]

Great work, thanks a lot for sharing.

[zlatkoiliev]

This is great tutorial! I only have one question, what if our component is wired up with redux and also receives props from the parent component? How do I pass state and props? And how do you dive() in this component?

[arjun]

I have a question which I have been struggling with from very long. How would I simulate something by using setState here?
Since my component is wrapped inside a <ContextProvider>, I get the error that 'ShallowWrapper::setState() can only be called on class components' while setting the state

[MohitSharma-vbjk]

I am using reselect to filter the state before passing on to the mapStateToProps function, but while testing I got an error saying " TypeError: state.get is not a function ", can you find out where the problem is or is there any other way to test connected components while using selectors?

[RichardGrac]

Are these tutorials going to continue?