集成测试 React+Redux

Question

我正在尝试测试我的简单组件(以前的切换，今天在材料用户界面库中名为Switch(。

我把它包装成：

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);

此组件的放置方式如下：

<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}             
/>

现在我的测试是：

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)
});
});

现在的问题是，代码转到 AutoRefreshSwitch 中的 handleChange，但它不会调用其余代码(this.props.onAutoRefreshClick 未触发(

我想知道是不是因为我没有安装自动刷新开关的父级。

这应该是受启发的集成测试

https://medium.freecodecamp.org/real-integration-tests-with-react-redux-and-react-router-417125212638

提前感谢您的任何帮助:)

Answer 1

中缺少调度

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