错误：此方法只能在单个节点上运行。找到了 0 个

Posted 2023-02-21

【中文标题】错误：此方法只能在单个节点上运行。找到了 0 个

【英文标题】：Error: This method is only meant to be run on single node. 0 found instead

【发布时间】：2016-09-19 19:09:39

【问题描述】：

我正在测试组件中的键绑定功能。该组件相当简单，keyup 的事件侦听器并触发一个 redux 操作，该操作将隐藏该组件。

我已将此处的代码清理为仅相关信息。如果我只使用 store dispatch 来进行操作调用，我就能通过测试，但这当然会破坏这个测试的目的。我正在使用 Enzyme 使用适当的事件数据（esc 的键码）模拟 keyup 事件，但遇到以下错误。

MyComponent.js

import React, Component, PropTypes from 'react';
import styles from './LoginForm.scss';
import hideComponent from '../../actions';
import connect from 'react-redux';

class MyComponent extends Component 
  static propTypes = 
      // props
  ;

  componentDidMount() 
    window.addEventListener('keyup', this.keybindingClose);
  

  componentWillUnmount() 
    window.removeEventListener('keyup', this.keybindingClose);
  
  
  keybindingClose = (e) => 
    if (e.keyCode === 27) 
      this.toggleView();
    
  ;

  toggleView = () => 
    this.props.dispatch(hideComponent());
  ;

  render() 
    return (
      <div className=styles.container>
        // render code
      </div>
    );
  


export default connect(state => (
  // code
))(MyComponent);

MyComponent-test.js

import React from 'react';
import chai, expect from 'chai';
import chaiEnzyme from 'chai-enzyme';
import configureStore from 'redux-mock-store';
import mount from 'enzyme';
import Provider from 'react-redux';
import thunk from 'redux-thunk';
import MyComponent from '../../common/components';
import styles from '../../common/components/MyComponent/MyComponent.scss';

const mockStore = configureStore([thunk]);
let store;
chai.use(chaiEnzyme());

describe.only('<MyComponent/>', () => 
  beforeEach(() => 
    store = mockStore();
  );

  afterEach(() => 
    store.clearActions();
  );

  it('when esc is pressed HIDE_COMPONENT action reducer is returned', () => 
    const props = 
      // required props for MyComponent
    ;
    const expectedAction = 
      type: require('../../common/constants/action-types').HIDE_COMPONENT
    ;
    const wrapper = mount(
      <Provider store=store key="provider">
        <LoginForm ...props/>
      </Provider>
      );
    // the dispatch function below will make the test pass but of course it is not testing the keybinding as I wish to do so
    // store.dispatch(require('../../common/actions').hideComponent());
    wrapper.find(styles.container).simulate('keyup', keyCode: 27);
    expect(store.getActions()[0]).to.deep.equal(expectedAction);
  );
);

错误：

Error: This method is only meant to be run on single node. 0 found instead. 

at ReactWrapper.single (/Users/[name]/repos/[repoName]/webpack/test.config.js:5454:18 <- webpack:///~/enzyme/build/ReactWrapper.js:1099:0)
        

at ReactWrapper.simulate (/Users/[name]/repos/[repoName]/webpack/test.config.js:4886:15 <- webpack:///~/enzyme/build/ReactWrapper.js:531:0)


at Context.<anonymous> (/Users/[name]/repos/[repoName]/webpack/test.config.js:162808:55 <- webpack:///src/test/components/MyComponent-test.js:39:40)

【参考方案1】：

大家好，在我的情况下，我使用 1-首先获取容器 2-获取按钮 3-执行道具onClick

 it('should Click on edit row', () => 
  const containerButton =  wrapper.find('.editCell')
  const editButton = containerButton.find('.buttonAlignRight')  
  editButton.props().onClick() 
  expect(wrapper.find('input')).toBeVisible()
)

【参考方案2】：

您没有找到任何节点，因为您尝试到达的元素位于另一个级别。按类，id..选择一个特定元素，然后试试这个

wrapper.find('LoginForm')
  .dive()
  .find('.CLASS_NAME_OF_ELEMENT')
  .simulate('click');

【参考方案3】：

如果你有多个 html 元素，比如

 <button className = "age_up" onClick = () => dispatch(onAgeUpAction())> 
        Age UP 
        </button> 
        <button className = "age_down" onClick = () => dispatch(onAgeDownAction())>
             Age Down 
       </button> 
        <button type = "button"onClick = handleClick> 
        Fetch Post 
        </button> 

并通过类似的通用查询调用它

wrapper.find('button').simulate('click');

它将为您返回所有三个节点。 所以用唯一的 ID 或类名来称呼它。

【参考方案4】：

正如它所说，当您使用除 1 以外的任意数量的节点运行它时，就会发生该错误。

与 jQuery 类似，您的 find 调用将返回一些节点（实际上它是一个知道您的 find 选择器找到多少节点的单个包装器）。而且您不能针对 0 个节点调用 simulate！或多个。

然后解决方案是找出为什么您的选择器（wrapper.find(styles.container) 中的 styles.container）返回 0 个节点，并确保它准确返回 1，然后 simulate 将按预期工作。

const container = wrapper.find(styles.container)
expect(container.length).to.equal(1)
container.simulate('keyup', keyCode: 27);
expect(store.getActions()[0]).to.deep.equal(expectedAction);

Enzyme 的debug 方法在这里非常有用。您可以使用console.log(container.debug()) 或console.log(container.html()) 来确保您的组件在测试期间按预期呈现。