Интеграционный тест React + Redux - PullRequest
Новая
       16

Интеграционный тест React + Redux

0 голосов
/ 27 сентября 2018

Я пытаюсь протестировать мой простой компонент (предыдущий переключатель, сегодня называемый Switch in material-ui library).

Я завернул это в: 

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

Теперь проблема в том, что код переходит к handleChange в AutoRefreshSwitch, но не вызывает остальную часть кода (this.props.onAutoRefreshClick не запускается)

Интересно, не потому ли я монтирую родителейAutoRefreshSwitch.

Предполагалось, что это будет интеграционный тест, основанный на

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

Заранее благодарен за любую помощь:)

1 Ответ

0 голосов
/ 27 сентября 2018

Не удалось отправить в 

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