onClick Jest / 酶：方法“模拟”意味着在 1 个节点上运行。找到了 0 个

Question

我无法测试以下代码的 onClick。我不断收到以下错误：

Method “simulate” is meant to be run on 1 node. 0 found instead.

我的组件代码如下所示：

constructor (props) {
  super(props)
  this.state = INITIAL_STATE;
}

handleQuickFilter = (type) => {
  this.setState({
    quickFilterObj: {...this.state.quickFilterObj, [type]: {...this.state.quickFilterObj[type], checked: !this.state.quickFilterObj[type].checked}}
    }, () => {
      let filter = this.buildFilter();
      filter ? 
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}=$filter=(${filter}),{grid_selectable}=1,{can_add}=1`) 
      :
        linker.UniversalGrid('Counterparty.Loa.Enrollment', '', `{form_filter}='',{grid_selectable}=1,{can_add}=1`)
  })
}

render () {
  return(
    <div className='enrollment-grid-wrapper'>   
      <div className='quick-filter-div'>
        <button className={this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                id = 'testnew'
                onClick={() => {this.handleQuickFilter('New')}}
                >
            New {this.state.quickFilterObj['New'] && this.state.quickFilterObj['New'].count !== undefined ? `(${this.state.quickFilterObj['New'].count})` : null}
        </button>
        <button className={this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].checked ? 'checked quick-filter' : 'unchecked quick-filter'} 
                onClick={()=>{this.handleQuickFilter('Sent')}}
                >
            Sent {this.state.quickFilterObj['Sent'] && this.state.quickFilterObj['Sent'].count !== undefined ? `(${this.state.quickFilterObj['Sent'].count})` : null}
        </button>
  )
}

我使用 Jest / 酶尝试了以下方法：

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  wrapper.find('.quick-filter-div').at(0).simulate("click");
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

我怎样才能通过以下测试？

Answer 1

必须在你的 jest.fn 函数中添加一个 return new Promise

//mocking functions
getSelectedLOAs  = jest.fn( () => {
return new Promise((resolve, reject) => {
resolve()
})
});


it("should test click event NEW  method", () => {
wrapper.setProps({
});
wrapper.find('COMPONENT').setState({ 
  quickFilterObj:{
    New: {
      checked: true
    },
    Sent: {
      checked: true
    },

   }, } );
wrapper.update();
wrapper.find('#New-testclick').simulate("click");
wrapper.find('#Sent-testclick').simulate("click");

Answer 2

由于您使用的是 css 模块，因此您实际渲染的 DOM 将不包含类 quick-filter-div 的 div。相反，该类将类似于quick-filter-div__012xyz。因此，wrapper.find('.quick-filter-div') 将返回 0 个节点。

您可以通过在测试中紧跟setState 行之后添加以下行来验证这一点：

expect(wrapper.find('.quick-filter-div').exists()).toEqual(false)

但是，看起来您要测试的是在您的div.quick-filter-div 内点击button。这不正确吗？毕竟，onClick 处理程序是button 而不是div 的道具。

而且，因为你的button 已经被赋予了一个ID，你可以这样做：

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const button = wrapper.find('button#testnew') // find button based on id selector
  expect(button.exists()).toEqual(true)         // make sure button is found
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});

如果您没有为按钮提供 id，但您知道要测试的按钮点击是第一个按钮（而不是第二个按钮），那么您可以尝试：

it("should HandlequickFilter with button click", () => { 
  wrapper.setProps({}); 
  wrapper.setState({quickFilterObj:"test"}); 
  const buttons = wrapper.find('button')        // find all buttons
  expect(buttons).toHaveLength(2)               // make sure you found 2 buttons
  const button = buttons.at(0)                  // get the first button
  button.simulate("click");                     // simulate click
  expect(wrapper.state().quickFilterObj.New.checked).toEqual(true);
});