javascript - react Jest enzyme : testing callback of child component that calls another function first before calling the callback

Question

我正在测试单击子组件中的按钮后是否调用传递给子组件的回调。我模拟了react-bootstrap按钮，<Button></Button> ，通过使用.simulate('click')功能。

问题是onClick()我的按钮的功能调用另一个名为 update() 的函数该函数调用 handleSave回调传递给我的子组件。 onKeyPress <FormControl/>的功能element 还调用我的组件的更新函数。这是我的子组件设置方式:

    update(event) {              

       //Have to check to see if the key stroke is the enter key or if it comes from the button click.
       if(event.charCode === 13 || event.type === 'react-click'){

       // Have to use this get the ref value because this.refs.input.value doesn't work.
       var input = ReactDOM.findDOMNode(this.refs.input);

       input.value = '';
       this.props.handleSave();
   }
}

render(){

    return( 
       <Form>
         <FormControl type="text" ref="input" onKeyPress={this.update.bind(this)} placeholder="Enter Note" />
         <Button onClick={this.update.bind(this)}>Submit </Button>
       </Form>
    )
}

这就是为什么我的 update()函数检查是否来自 charCode==13 ，这是回车键或按钮单击的 charCode，因为两者都保存 <FormControl /> 中的信息。

我的测试设置是这样的:

describe('Input', () => {

const mockHandleText = jest.fn();
const mockHandleSave = jest.fn();
const props          = {handleSave: mockHandleSave}
let input            = shallow(<Input {...props} />);

   describe('when entering a note', () => {

    beforeEach(() => {
            input.find('Button').simulate('click', {
                charCode: 13
            });
    });


    it('adds the note to state', () => {
        expect(props.handleSave).toHaveBeenCalled();
    });
  });
 });

一个奇怪的事情是我必须将一个对象作为第二个参数传递给 .simulate()函数，因为如果我不这样做，它会给我一个错误，说无法读取未定义的 charCode，但是当传递一个对象时，该对象甚至不必具有事件属性，然后它只是说

expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called.

此外，如果我不传入具有某些属性的对象，那么它也会破坏我对 onChange 进行回调的其他测试。我的元素的功能。为了简单起见，我将其排除在代码示例之外，只是上传了给我带来问题的代码。我还使用带有 和 的 Bootstrap 表单。完整的代码位于我的 github 上:github.com/Alebron23。

Answer 1

Enzyme 的浅层方法不会渲染整个 DOM 树，仅渲染最浅层。您将无法找到使用它的嵌套子级。在shallow( https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md )的文档中，他们讨论了如果您需要在子组件上断言任何行为，则必须使用shallow() 以外的其他方法。

您的其他选择是使用 render()，或者更有可能 - 因为 render() 是静态的并且您想测试副作用 - 完全 mount() 而是组件 ( https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md )。