Как проверить функцию, которая изменяет состояние, с помощью Enzyme и Material-UI withStyles HoC - PullRequest
0 голосов
/ 16 января 2019

Я пытаюсь написать ферментный тест, чтобы щелкнуть по переключателю, а другой - вручную вызвать функцию, подключенную к этому переключателю. Эта функция обновляет состояние. Я не могу заставить ни один тест на работу.

В Интернете так много разных примеров, что это стало очень запутанным. Интересно, что до того, как я использовал createShallow в MUI, у wrapper.instance () было состояние, а не обертка.

Компонент

import React, { Component } from 'react';
import scss from './scss.module.scss'; 
import PropTypes from 'prop-types';

import { withStyles } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';
import Drawer from '@material-ui/core/Drawer';


let styles = inlineStyles;

class Layout extends Component {
    state = {
      edit: false,
    };
render () {
    const { classes } = this.props;

    return (
        <div id="LayoutId" className={scss.layout}>
            <Drawer>
            </Drawer>
            <AppBar>
              <Toolbar> 
                <FormGroup row className={classes.EditSwitch}>
                    <FormControlLabel
                        control={
                          <Switch
                            id={'editSwitchId'}
                            checked={this.state.edit}
                            onChange={this.handleChange('edit')}
                            value="edit"
                            color="primary"
                          />
                        }
                        label="Edit"
                    />
                </FormGroup>
              </Toolbar>
            </AppBar>
        </div>
    )
}

Мелкий тест

describe('Invoking "handleChange" method', () => {

    let shallow;
    beforeAll(() => {
        shallow = createShallow({ dive: true });
    });
    it('renders Landing Page', (done) => {
        const wrapper = shallow(<Layout />);
        const instance = wrapper.instance();
        instance.handleChange('adminEdit',{target:{checked:true}});
        wrapper.update();
        expect(instance.state.adminEdit).toBe(true);
        done(); 
    });
});

Испытание на крепление

describe('indirectly testing "handleChange" through click simulation', () => {
    it('should update the edit state', () => {
        const wrapper = mount(<Layout />);
        wrapper.setState({
            edit: true,
        });
        expect(wrapper.state('edit')).toBe(true);
        let AllFoundSwitchIds = wrapper.find('#editSwitchId').hostNodes();

        const event = {target: {checked: !wrapper.state().edit}};
        AllFoundSwitchIds.props().val = false;
        AllFoundSwitchIds.simulate('change', event);
        wrapper.update();
        expect(wrapper.state('edit')).toBe(false);
    });
});
...