时间戳

首页 > 解决方案 > OnClick = 方法模拟意味着运行 1 one = 0 found

javascript - OnClick = 方法模拟意味着运行 1 one = 0 found

问题描述

无法找出以下错误：Using Jest Enzyme - React JS

** 方法“模拟”意味着在 1 个节点上运行。找到了 0 个。**

我正在尝试测试 onClick = 的 props/properties 。onClick 会为此文件调用几次。我尝试应用我用于不同文件的相同方法，但它目前不起作用示例：onClick 调用（this.props）：

   <div className="continue_button_div">
  <button className='cancel_button' id='cancel-add-new-view' 
  title='Cancel' type='button' onClick={() => 
 {this.props.hideAddViewModal()}}>Cancel</button>
  </div>

 <div className="continue_button_div">
 <button className='cancel_button' id='cancel-add-new-view' title='Cancel' 
 type='button' onClick={() => 
 {this.props.hideAddViewModal()}}>Cancel</button>

我为我的测试文件做了以下事情。

// jest mock functions (mocks this.props.func)
const hideAddViewModal =  jest.fn();
// defining this.props
const baseProps = {
hideAddViewModal,

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

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

   it("should call hideAddViewModal functions on button click", () => {
// Reset info from possible previous calls of these mock functions:
baseProps.hideAddViewModal.mockClear();
wrapper.setProps({
});
// Find the button and call the onClick handler
wrapper.find('.sidemodal_addnew_x').at(0).simulate("click"); //pass
wrapper.find('.cancel_button').at(0).simulate("click"); //fails
wrapper.find('.cancel_button').at(1).simulate("click");//fails

但我不断收到上面描述的错误。

另一个 onClick 示例。我是否也可以将上述方法应用于此方法，或者如何确保 onClick 调用 clearviewName = () = {

clearViewName = () => {

this.setState({ViewName: ''});
this.setState({Requests: ''});
this.setState({allowNext: false})

Render(){
 <div className="fullmodal_title_select"><span 
className="fullmodal_title_add_done" onClick={() => {this.clearViewName()}} 
>Add View  </span><FontAwesome name='right' className='fa-angle-right' />  
Select a request</div>

谢谢

标签： javascriptreactjsunit-testingenzyme

解决方案

所以基本上是这样的：

it('For first cancel button', () => {
        // Reset info from possible previous calls of these mock functions:
        baseProps.hideAddViewModal.mockClear();
        wrapper.setProps({});
        // Find the button and call the onClick handler
        wrapper.setState({
          ViewName: 'something',
          allowNext: true,
        })
        wrapper.find('.cancel_button').at(0).simulate('click');
})

然后

it('For second cancel button', () => {
        // Reset info from possible previous calls of these mock functions:
        baseProps.hideAddViewModal.mockClear();
        wrapper.setProps({});
        // Find the button and call the onClick handler
        wrapper.setState({
          ViewName: 'something',
          RequestID: 'something',
          Requests: ['random, I dont know the type inside here so']
        })
        wrapper.find('.cancel_button').at(0).simulate('click');
})

还有什么理由让你像这样编写你的点击处理程序

onClick={() => {
  this.onContinueClick();
}}

而不是这个

onClick={this.onContinueClick}

关于另一个问题，

您可以编辑baseProps为如下所示：

const baseProps = {
   hideAddViewModal,
   location: {
     pathname: 'home'
   },
}

推荐阅读