Testing Redux Enzyme: Component doesn't re-render after state has changed - reactjs

Question

I have a connected component (to Redux store) called DrawerAvatar, that I export for testing purpose (Enzyme + Jest) both the connected and non connected version.
Basically, I want to test that my DrawerAvatar render the user avatar when my Redux state isAuthenticated is true, and it renders a logo picture when isAuthenticated is false.
DrawerAvatar.js
export class DrawerAvatar extends React.Component {
render () {
const avatarSrc = this.props.isAuthenticated ?
'http://user-avatar.png'
) : (
'http://logo.png'
);
return (
<StyledAvatarContainer>
<StyledAvatar src={avatarSrc} />
</StyledAvatarContainer>
);
}
}
const mapStateToProps = state => ({
isAuthenticated: state.authReducer.isAuthenticated
});
export default compose(
connect(mapStateToProps, null)
)(DrawerAvatar);
And in my test, I'm using the non-connected DrawerAvatar, and connect it to my real Redux store via the Provider like this: (initiale state: isAuthenticated: false)
DrawerAvatar.test.js:
import React from 'react';
import { shallow } from 'enzyme';
import { Provider } from 'react-redux';
import store from '../../store';
import connectedDrawerAvatar, { DrawerAvatar } from './DrawerAvatar';
describe('Header > DrawerAvatar: component', () => {
it('should render logo for the DrawerAvatar if not authenticated, and the user avatar if authenticated', () => {
const wrapper = shallow(<Provider store={store}><DrawerAvatar /></Provider>);
console.log(wrapper.dive().debug());
// Output:
// <StyledAvatarContainer>
// <StyledAvatar src="https://logo.png" />
// </StyledAvatarContainer>
const StyledAvatarSrc = wrapper.dive().find('StyledAvatar').prop('src');
expect(StyledAvatarSrc).toBe('https://logo.png'); // assertion passed
store.dispatch({ type: 'LOGIN_WITH_EMAIL_REQUESTED_TEST' });
// the state has been correctly updated, now isAuthenticated: true
console.log(wrapper.dive().debug());
// Output: same as above, whereas it should be:
// <StyledAvatarContainer>
// <StyledAvatar src="https://user-avatar.png" />
// </StyledAvatarContainer>
expect(StyledAvatarSrc).toBe('https://user-avatar.png'); // assertion failed
});
});
And here is my authReducer:
authReducer.js
const initialState = {
isAuthenticated: false
};
export default function authReducer (state = initialState, action) {
switch (action.type) {
case 'LOGIN_WITH_EMAIL_REQUESTED_TEST':
return {
...state,
isAuthenticated: true,
};
default:
return state;
}
}
So basically, I have a real action with type of LOGIN_WITH_EMAIL_REQUESTED that will call a bunch of Redux-saga with Axios, but for testing purpose, I just added to my real authReducer a LOGIN_WITH_EMAIL_REQUESTED_TEST case that will set the state isAuthenticated to true to avoid Axios calls etc...Not sure if it's a good way to do things though..lol
I've tried in vain to force the component to update with wrapper.update()...
I've also looked at redux-mock-store, but it seems like you cannot modify the state and only deals with actions and not the states.
I just start writing my first React test so...thank you !

Answer 1

Basically, I want to test that my DrawerAvatar render the user avatar when my Redux state isAuthenticated is true, and it renders a logo picture when isAuthenticated is false.
I would recommend not connecting the entire connected component and trying to bother with Redux at all. You can achieve your expected result with the following:
describe('Header > DrawerAvatar: component', () => {
it('should render logo for the DrawerAvatar if not authenticated, and the user avatar if authenticated', () => {
let wrapper = shallow(<DrawerAvatar isAuthenticated={false} />);
let StyledAvatarSrc = wrapper.find('StyledAvatar').prop('src');
expect(StyledAvatarSrc).toBe('https://logo.png');
wrapper = shallow(<DrawerAvatar isAuthenticated={true} />);
StyledAvatarSrc = wrapper.find('StyledAvatar').prop('src');
expect(StyledAvatarSrc).toBe('https://user-avatar.png');
});
});
Then, you can write separate tests for each of the pieces involved, for example your mapStateToProps function, which is really just a simple function that returns an object based on its input. And another simple test of your authReducer, etc