Имитация изменений с пользовательским интерфейсом материала и фермент не работает - PullRequest
0 голосов
/ 07 марта 2020

Когда я пытаюсь смоделировать событие изменения с помощью Enzyme в моем компоненте Material-UI, value не меняется.

Мой компонент выглядит так:

export class EditableList extends Component {

...

    onChangeNewEntry = event => {
        this.setState({newEntry: event.target.value});
    };


    render() {
        const {classes} = this.props;

        return (
            <div className={classes.div_main}>
                <List>
                    <Paper className={classes.paper_title}  elevation={2} key="NewEntry">
                        <ListItem>
                            <InputBase
                                data-testid='input-base'
                                className={classes.inputBase}
                                placeholder="New Entry"
                                value={this.state.newEntry}
                                onKeyPress={(event) => {
                                    if (event.key === 'Enter') {
                                        event.preventDefault();
                                        this.onCreateItem();
                                    }
                                }}
                                onChange={this.onChangeNewEntry}
                                multiline
                            />

                        </ListItem>
                    </Paper>
                </List>
            </div>
        );
    }
}

Мой тест выглядит так:

import React from 'react';
import {Provider} from "react-redux";
import EditableList from "./EditableList";
import store from "../../../../store";
import {createMount, createShallow} from "@material-ui/core/test-utils";
import {InputBase} from "@material-ui/core";


let mount;
let wrapper;

beforeEach(() => {
    mount = createMount();

    wrapper = mount(
        <Provider store={store}>
            <EditableList/>
        </Provider>
    );
});

afterEach(() => {
    mount.cleanUp();
});

const findComponent = ( value) => {
  return wrapper.find(`[data-testid='${value}']`).first();
};

it('allow user to write input for new item', () => {

    const inputBase = findComponent('input-base');
    const value = "New item";

    inputBase.simulate('change', {target: {value: value}});
    wrapper.update();

    console.log(inputBase.prop('value'));
});

В консоли value всегда является пустой строкой.

Я также безуспешно пытался выполнить следующее:

wrapper.find(InputBase).at(0).props().onChange({target: {value: value}});
wrapper.find(InputBase).at(0).props().onChange({target: {name: 'InputBase', value: value}});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...