Question

因此，我有一个称为InventoryView的父组件和一个子组件InventoryBase，该子组件基本上呈现了InventoryView发送给它的数据。因此，我一直遇到的问题是，我需要测试InventoryBase中的“更新”按钮是否正在调用handleUpdate()。仅当输入值实际上已更改时才应调用HandleUpdate。我需要测试如果输入发生更改，是否正在调用handleUpdate()。

因此，该按钮首先调用-> handleClick()，该按钮查看输入并收集数据，然后调用handleUpdate()，该按钮传播到InventoryView。当我测试handleUpdate()并确定输入是否已更改时，它说handleUpdate()被调用了零次。由于我更改了输入之一，因此handleUpdate()和handleClick()都应该被调用一次。但是它们被调用了0次。我在console.log中prev和cur输入了handleClick()和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} /> ); }被触发，但是未点击模拟。.???我不确定这里发生了什么。

InventoryView：

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

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

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

});

InventoryView.test.js：

List<Language> langList = criteria.list()

使用Jest酶进行测试时，如何测试子组件中的按钮单击？

0 个答案: