reactjs - 笑话 : Cannot read property then of undefined

Question

我在 react 应用程序的单元测试用例中遇到了情况，其中一个函数调用从父组件的 props 中接收到的另一个函数。父组件函数定义是这样的:

onSavePropClick(action) { 
    const save = this.saveProperty(action);
    if(action === SAVE){
        return () => new Promise(() => {
            resolve(this.calculate().then(save));
       });
    }
return save;
}

此函数调用已作为 Prop 传递给子组件

<MyComponent finalSave={this.onSavePropClick(SAVE)} onClose={()=>this.setState({closeWindow: true})} />

MyComponent 有一个功能:

savingAndShowResults() {
const { finalSave, onClose } = this.props;
finalSave().then(() => {
onClose();
});
return true;
}

现在，当我对已执行的测试进行测试时，它会抛出我的错误“无法读取未定义的属性”，测试如下

const initialProps={
finalSave: jest.fn(),
onClose: jest.fn()
};

it(‘should handle saving and show results’, () => {
const component = shallow(
<MyComponent {...initialProps} />
);
component.instance().savingAndShowResults();
expect(initialProps.finalSave).toHaveBeenCalled();
expect(initialProps.onClose).toHaveBeenCalled();
});

我无法弄清楚为什么即使在对父组件功能的 promise 进行解决时，也会给我这个错误。
请建议。

Answer 1

假设 initialProps.finalSave 是一个模拟函数，您需要确保从 initialProps.finalSave 返回一个 promise :

const initialProps = {
  finalSave: jest.fn().mockImplementation(() => Promise.resolve());
  ...
};