集成测试 React+Redux

Question

我正在尝试测试我的简单组件（以前的切换，今天在 material-ui 库中命名为 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 未被触发）

我想知道是不是因为我没有挂载 AutoRefreshSwitch 的父母。

这应该是受

启发的集成测试

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