Как проверить нажатие кнопки в дочернем компоненте при тестировании с использованием Jest Enzyme?

Question

Итак, у меня есть родительский компонент InventoryView и дочерний компонент InventoryBase, который в основном отображает данные, отправленные ему InventoryView. Поэтому проблема, с которой я продолжаю сталкиваться, заключается в том, что мне нужно проверить, вызывает ли кнопка «Обновить» в InventoryBase handleUpdate(). HandleUpdate следует вызывать только в том случае, если входные значения действительно были изменены. Мне нужно проверить, вызывается ли handleUpdate(), если ввод изменяется или нет.

Итак, кнопка сначала называется -> handleClick(), которая просматривает входные данные и собирает данные, а затем вызывает handleUpdate(), который распространяется на InventoryView. Когда я проверяю handleUpdate() и проверяю, изменились ли входы, он говорит, что handleUpdate() был вызван ноль раз. Так как я изменил один из входов, handleUpdate() и handleClick() оба должны быть вызваны один раз. Но их называют 0 раз. Я console.log prev и cur вводим значения в handleClick(), поэтому, когда я имитирую нажатие кнопки, эти значения печатаются, то есть handleClick() срабатывает, но нажатие на макет не регистрируется .. ??? Я не уверен, что здесь происходит.

InventoryView:

 render() {
    return(
        <InventoryBase
            tableHeadings={inventoryViewUpdate.tableHeadings}
            tableTitle={inventoryViewUpdate.tableTitle}
            tableBody={this.state.tableBody}
            tableFooter={this.state.tableFooter}
            handleUpdate={this.handleUpdate}
            lastUpdated={this.state.lastUpdated}
            endOfDay={true} />
    );
}

InventoryBase: inventoryBase.updateBtn === 'ОБНОВЛЕНИЕ' - это идентификатор, который я использую для имитации кнопки.

handleClick = (inputIds, prevVals) => {
    let change = false;
    let curVals = [];
    let update = {
        inputUpdate: [],
        timeUpdate: this.updateDate()
    };
    for (let i in inputIds) {
        let pkg = {
            id: inputIds[i],
            value: document.getElementById(inputIds[i]).value
        }
        curVals[i] = pkg.value;
        update.inputUpdate.push(pkg);
    }

    for (let i in curVals) {
        if (curVals[i] != prevVals[i]) change = true;
    }
    if (change === false) return;
    console.log(curVals); <-- prints ['2', '4']
    console.log(prevVals); <-- prints ['4', '4']
    this.props.handleUpdate(update); <----- call handleUpdate here if inputs have changed
}

render() {
    let inputIds = [];
    let prevVals = [];
    const { classes } = this.props;
    return (
        <Aux>
            <Paper className={classes.root}>
                <div style={{ float: 'right', width: "132px" }}>
                    <div style={{ display: 'flex', align: 'center', justifyContent: 'center' }}>
                        <Button type="button" id={inventoryBase.updateBtn} variant="contained" onClick={() => this.handleClick(inputIds, prevVals)} className={classes.updateBtn}>
                            <span>
                                <Autorenew style={{
                                    color: '#FFFFFF',
                                    marginRight: '8px'
                                }} />
                            </span>
                            <span>
                                <Typography style={{ marginBottom: '8px' }} className={classes.btnText}>{inventoryBase.updateBtn}</Typography>
                            </span>
                        </Button>
                    </div>
                ....
                ..... more code
            </Paper>
        </Aux>
    );
}

InventoryView.test.js:

const STORE = createStore();

describe('InventoryBase', () => {
    let wrapper;
    let props;
    beforeEach(() => {
        props = {
            inventory: inventory,
            packages: packages,
            branchLockers: branchLockers,
            updateInventory: jest.fn(),
            handleUpdate: jest.fn()
        }
        wrapper = mount(
            <Provider store={STORE}>
                <InventoryViewComponent {...props}/>  
            </Provider> , { attachTo: document.body }
        );
    });

    test('Should update last updated time if input values have changed', () => {
        document.getElementById('Envelop_1').value = '2'

        wrapper.find('#UPDATE').at(0).simulate('click');
        wrapper.update();

        expect(props.handleUpdate).toHaveBeenCalledTimes(1);
    });

});