错误:此方法仅应在单个节点上运行.找到0个代替 [英] Error: This method is only meant to be run on single node. 0 found instead

问题描述

我正在测试组件中的键绑定功能.该组件非常简单，用于keyup的事件侦听器，并触发 redux操作，它将隐藏该组件.

I am testing a keybinding feature in a component. The component is rather simple, event listener for the keyup and fires up a redux action which will hide the component.

我已在此处将代码清理为仅包含相关信息.如果仅使用 store dispatch 进行动作调用，我就能通过测试，但是这样做当然会破坏测试的目的.我正在使用酶用适当的事件数据(esc的键代码)模拟keyup事件，但是遇到以下错误.

I have cleaned up my code here to only relevant information. I am able to make the test pass if I just use the store dispatch to make the action call but that of course will defeat the purpose of this test. I am using Enzyme to simulate the keyup event with the appropriate event data (keycode for esc) but I come across the error below.

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);
  });
});

错误:此方法仅应在单个节点上运行.找到0个代替.

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

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

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

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

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

在上下文中. (/Users/[名称]/repos/[repoName]/webpack/test.config.js:162808:55<-webpack:///src/test/components/MyComponent-test.js:39:40)

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

推荐答案

当您说它在除1以外的任意数量的节点上运行时，就会发生该错误.

That error happens when, as it says, you run it with any number of nodes other than 1.

类似于jQuery，您的find调用将返回一定数量的节点(实际上，这是一个包装器，它知道您的find选择器找到了多少个节点).而且您不能在0个节点上调用simulate！或多个.

Similar to jQuery, your find call will return some number of nodes (really it's a single wrapper that knows how many nodes your find selector has found). And you can't call simulate against 0 nodes! Or multiple.

然后的解决方案是弄清楚为什么选择器(wrapper.find(styles.container)中的styles.container)返回0个节点，并确保它返回的恰好是1，然后simulate将按预期工作.

The solution then is to figure out why your selector (the styles.container in wrapper.find(styles.container)) is returning 0 nodes, and make sure it returns exactly 1, and then simulate will work as you expect.

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);

酶的调试方法在这里真的很有用.您可以执行console.log(container.debug())或console.log(container.html())来确保您的组件在测试过程中按预期方式呈现.

Enzyme's debug method is really useful here. You could do console.log(container.debug()), or also console.log(container.html()) to make sure your component is rendering as expected during the test.

这篇关于错误:此方法仅应在单个节点上运行.找到0个代替的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！