Set state of redux connected react component using enzyme

Question

import configureMockStore from 'redux-mock-store';
import NavBar from '../components/NavBar/NavBar';

const mockStore = configureMockStore(middlewares);
const store = mockStore(initialState);

wrapper = mount(
    <BrowserRouter> 
        <Provider store={store}>
            <NavBar {...props} />
        </Provider>
    </BrowserRouter> 
);

How can I update the state of NavBar component which is present in wrapper?

I tried updating using wrapper.setState({displayMenu:true}) but it was not updated because I think wrapper is wrap of component with Provider, so the state of NavBar is not updated.

Does this question (https://stackoverflow.com/questions/42245215/how-to-test-child-component-method-with-enzyme) help you? — Ghassen Louhaichi, Jun 24 '20 at 08:32

score -1 · Answer 1 · answered Oct 27 '20 at 16:30

To solve this problem, you can write like this:

import ConnectedNavBar, { NavBar } from '../components/NavBar/NavBar';

const wrapper = mount(
    <Provider store={store}>
        <ConnectedNavBar/>
    </Provider>
);

const navBarInstance = result.find(NavBar).instance() as NavBar;
navBarInstance.setState({displayMenu:true});

To get information about the redax-component

navBarInstance.props
navBarInstance.state

Notice! Pay attention to how the component is imported

import ConnectedNavBar, { NavBar } from '../components/NavBar/NavBar';

And the redax component is exported as follows:

export class NavBar extends Component<Props, State>{} 
/*...*/
export default connect<StateProps>(mapStateToProps)(NavBar);

I hope this solves your problem

It is not a good practice to have two exports from same component just to fix tests. — Pankaj Manali, Feb 01 '21 at 06:48

Set state of redux connected react component using enzyme

1 Answers1