Javascript 使用Jest酶测试时，如何测试子组件中的按钮点击？

所以我有一个名为InventoryView的父组件和一个子组件InventoryBase，它基本上呈现由InventoryView发送给它的数据。因此，我一直遇到的问题是，我需要测试InventoryBase中的更新按钮是否正在调用

handleUpdate（）

。仅当输入值已实际更改时才应调用HandleUpdate。我需要测试输入是否更改时是否调用了

handleUpdate（）

因此，该按钮首先调用-->

handleClick（）

，它查看输入并收集数据，然后调用

handleUpdate（）

，它将传播到InventoryView。当我测试

handleUpdate（）

并确保输入是否已更改时，它表示

handleUpdate（）

已被调用零次。由于我已经更改了其中一个输入，

handleUpdate（）

和

handleClick（）

都应该调用一次。但是他们被呼叫了0次。I

console.log

在

handleClick（）

中输入

prev

和

cur

值，因此当我模拟点击按钮时，这些值被打印出来，这意味着

handleClick（）

被触发，但点击模拟没有被注册。。？？？我不确定这里发生了什么

目录视图：

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

render（）{
返回(
);
}

InventoryBase:InventoryBase.updateBtn==='UPDATE'，这是我用来模拟按钮的ID

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

handleClick=（inputIds，prevals）=>{
让改变=错误；
设曲线=[]；
让更新={
inputUpdate:[]，
timeUpdate:this.updateDate（）
};
for（让我输入）{
设pkg={
id:inputIds[i]，
值：document.getElementById（inputIds[i]）.value
}
曲线[i]=包装值；
update.inputUpdate.push（pkg）；
}
for（让我输入曲线）{
如果（曲线[i]！=prevals[i]）更改=true；
}
if（change==false）返回；
控制台。日志（曲线）{
道具={
存货：存货，
套餐：套餐，
BranchLocker：BranchLocker，
updateInventory:jest.fn（），
handleUpdate:jest.fn（）
}
包装=装载(
，{attachTo:document.body}
);
});
测试（'如果输入值已更改，则应更新上次更新的时间'，（）=>{
document.getElementById（'Envelope_1'）。值='2'
在（0）处找到（“#更新”）。模拟（'click'）；
wrapper.update（）；
期望（道具。手更新）。已被催收时间（1）；
});
});

通过单独测试每个组件并传入模拟数据解决了此问题。通过单独测试每个组件并传入模拟数据解决了此问题。

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

});