Integration test React+Redux - reactjs

Question

I am trying to test my simple component (previous toggle, today named Switch in material-ui library).
I have this wrapped into:
class AutoRefreshSwitch extends React.Component {
constructor(props) {
super(props);
this.input = null;
}
handleChange = () => {
console.log('handler ')
this.props.onAutoRefreshClick(!this.props.autoRefreshStatus);
};
render() {
const {classes} = this.props;
return (
<FormControlLabel
control={
<Switch
checked={this.props.autoRefreshStatus}
onChange={this.handleChange}
color="primary"
classes={{
switchBase: classes.switchBase,
checked: classes.checked,
colorPrimary: classes.colorPrimary,
bar: classes.bar,
icon: classes.icon,
root: classes.root,
}}
disableRipple
inputProps={{id: "switch12345"}}
/>
}
label="Auto refresh"
classes={{label: classes.label}}
/>
);
}
}
export default withStyles(styles)(AutoRefreshSwitch);
This component is placed like it:
<Container> -> it has mapToState and mapToProps with this onAutoRefreshClick which is passed as a prop to component and then to AutoRefreshSwitch
<Component>
<AutoRefreshSwitch onAutoRefreshClick={onAutoRefreshClick}
autoRefreshStatus={autoRefreshStatus}
/>
Now my test is:
import {applyMiddleware, combineReducers, createStore} from 'redux';
import thunk from 'redux-thunk';
import React from 'react';
import {Provider} from 'react-redux';
import {configure, mount} from 'enzyme';
import {myReducer} from "../../src/reducers/overview";
import AutoRefreshSwitch from "../../src/blahblah/auto-refresh-switch";
import Adapter from 'enzyme-adapter-react-16';
import {setAutoRefreshStatus} from "../../src/actions/overview";
// from https://medium.freecodecamp.org/real-integration-tests-with-react-
// redux-and-react-router-417125212638
export function setupIntegrationTest(reducers, initialRouterState = {}) {
const dispatchSpy = jest.fn(() => ({}));
const reducerSpy = (state, action) => dispatchSpy(action);
const emptyStore = applyMiddleware(thunk)(createStore);
const combinedReducers = combineReducers({
reducerSpy,
...reducers,
});
const store = emptyStore(combinedReducers);
return { store, dispatchSpy };
}
configure({adapter: new Adapter()});
describe('integration tests', () => {
let store;
let dispatchSpy;
let wrapper;
beforeEach(() => {
({store, dispatchSpy} = setupIntegrationTest({myReducer}));
wrapper = mount(
<Provider store={store}>
<AutoRefreshSwitch onAutoRefreshClick={setAutoRefreshStatus}
autoRefreshStatus={store.getState().myReducer.autoRefreshStatus}
/>
</Provider>)
});
it('should change the status', () => {
wrapper.find('#switch12345').simulate('change');
wrapper.update();
expect(store.getState().myReducer.autoRefreshStatus).toBe(false)
});
});
Now problem is that, code goes to handleChange in AutoRefreshSwitch but it does not invoke rest of code (this.props.onAutoRefreshClick is not triggered)
I wonder if it is because I don't mount the parents of AutoRefreshSwitch.
This was supposed to be integration test inspired by
https://medium.freecodecamp.org/real-integration-tests-with-react-redux-and-react-router-417125212638
Thanks in advance for any help :)

Answer 1

There was missing dispatch in
beforeEach(() => {
({store, dispatchSpy} = setupIntegrationTest({myReducer}));
wrapper = mount(
<Provider store={store}>
<AutoRefreshSwitch onAutoRefreshClick={() => store.dispatch(setAutoRefreshStatus)}
autoRefreshStatus={store.getState().myReducer.autoRefreshStatus}
/>
</Provider>)
});