Reactjs 方法“；模拟&x201D；将在1个节点上运行。改为找到0。-玩笑/酶

我正在尝试测试onClick，但没有使用道具调用它们：

这是file.js的一部分

    handleSystemClick = () => {
// var message = All unsaved changes will be lost.`
confirmAlert({
  title: 'Confirm Navigation',
  message: ' All unsaved changes will be lost.',
  childrenElement: () => <div></div>,
  confirmLabel: 'Confirm',
  cancelLabel: 'Cancel',
  onConfirm: () => {this.setState({ toSystemEntitlments: true})},
  onCancel: () => {},
})

  }
 handleCancelClick = () => {
  window.history.back();
}

handleSystemClick=（）=>{
//var message=所有未保存的更改都将丢失`
确认员({
标题：“确认导航”，
消息：“所有未保存的更改都将丢失。”，
childrenElement:（）=>，
confirmLabel:“确认”，
取消标签：“取消”，
onConfirm:（）=>{this.setState（{toSystemTitlments:true}}），
onCancel:（）=>{}，
})
}
handleCancelClick=（）=>{
window.history.back（）；
}

下面是file.js的渲染方法

render()
return(
<div className='add-edit-button' id= 'test1' onClick={() => {this.handleSystemClick()}}>System</div>
<div className='add-edit-button' onClick={() => {this.handleCancelClick()}}>Cancel</div>
<div className='add-edit-button' onClick={() => {this.handleSave()}}>Save</div>
      </div>

render（）
返回(
{this.handleSystemClick（）}>System
{this.handleCancelClick（）}}>取消
{this.handleSave（）}}>保存

我在这里看到了一些有关stackoverflow的示例，并尝试应用以下内容：

 // jest mock functions (mocks this.props.func)

 // defining this.props
   const baseProps = { 

   describe(' FunctionalEntitlement  Test', () => {
   let wrapper;
   let tree;

    beforeEach(() => wrapper = shallow(<BrowserRouter><Component     {...baseProps} /></BrowserRouter>));


 it("should call handlesave function on button click", () => {
// Reset info from possible previous calls of these mock functions:
baseProps.handleSave.mockClear();
wrapper.setProps({
});
wrapper.setState({ getINITIAL_STATE:""
});
wrapper.find('.add-edit-button').at(0).simulate("click");
  expect(baseProps.handleSave).toHaveBeenCalled();
expect(toJson(wrapper)).toMatchSnapshot();

//jest模拟函数（模拟this.props.func）
//定义这个.props
常量baseProps={
描述（‘功能测试’，（）=>{
让包装纸；
让树；
之前（（）=>wrapper=shall（））；
它（“点击按钮时应调用handlesave函数”，（）=>{
//重置这些模拟函数以前可能调用的信息：
baseProps.handleSave.mockClear（）；
包装器.setProps({
});
wrapper.setState（{getINITIAL_状态：“）
});
wrapper.find（'.addedit按钮'）。在（0）处。模拟（“单击”）；
expect（baseProps.handleSave）.tohavebeincall（）；
expect（toJson（wrapper））.toMatchSnapshot（）；

}))

另外，如何在基于file.js的前两次单击中应用相同的方法

---

感谢您的帮助

我能够解决一些问题，但我如何才能改进以下答案

将“浅”切换到“装入”，以便渲染子组件

  it("should  call  button click 3 times", () => {
// Reset info from possible previous calls of these mock functions:
 wrapper.setProps({
});
wrapper.setState({ 
});
wrapper.find('.add-edit-button').at(0).simulate("click");
wrapper.find('.add-edit-button').at(1).simulate("click");
wrapper.find('.add-edit-button').at(2).simulate("click");

expect(toJson(wrapper)).toMatchSnapshot();
 });

---

如果您想使用

shallow

有一种方法可以获得其中一个子组件的shallow包装器。如果您必须在测试中经常使用

BrowserRouter

包装组件，可能值得为此使用一种帮助器方法，例如：

function shallowWithBrowserRouter(component) {
   return shallow(<BrowserRouter>{component}</BrowserRouter>).childAt(0).dive();
}

使用浏览器路由器（组件）的功能{
返回shallow（{component}）.childAt（0.dive（）；
}

据我所知，错误似乎是当您在测试中找到编辑按钮时，您缺少一个点来指定它是CSS类。

wrapper.find（'.add edit button'））

Martin-我也这样做了。它不起作用。好的，当你

浅层
一个组件时，它不会呈现子组件，因为你的组件在
中，无法访问
添加编辑按钮。请尝试直接
浅层
该组件，或者使用
装载
。@MartinPrins我在过去做过一些单元测试，我能够测试a中的点击。我将根据您的回答再试一次Martin根据您的回答我如何改进？我能够通过使用mount并将以下内容作为回答。如果您展示整个测试，这将更有帮助。