React-jest-enzyme：在调用回调之前先测试调用另一个函数的子组件的回调

Question

我正在测试传递给子组件的回调是在点击子组件中的按钮后调用的。我使用.simulate('click')函数来模拟react-bootstrap按钮<Button></Button>。

问题是我的按钮的onClick()函数调用另一个函数update()，该函数调用传递给我的子组件的handleSave回调函数。 <FormControl/>元素的onKeyPress函数也调用我的组件的更新函数。这里是我有我的孩子的组件设定：

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函数。为了简单起见，我将其从代码示例中删除了，并且只是上传了代码给我带来了问题。我也在使用引导形式。完整的代码在我的github上github.com/Alebron23上。

Answer 1

酶的浅层方法不会渲染整个DOM树，只是最浅层次。您将无法找到使用它的嵌套子项。在浅层文档（https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md）中，他们讨论如果您需要在子组件上声明任何行为，则必须使用shallow（）以外的内容。

你的其他选择，其一是利用渲染（），或相当可能更多，因为渲染（）是静态的，你想测试方面效果 - 完全安装（） 成分（https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md）来代替。