web-dev-qa-db-fra.com

Erreur: cette méthode est uniquement destinée à être exécutée sur un seul nœud. 0 trouvé à la place

Je teste une fonction de liaison de touches dans un composant. Le composant est plutôt simple, écouteur d'événements pour le keyup et déclenche un action redux qui masquera le composant.

J'ai nettoyé mon code ici uniquement pour les informations pertinentes. Je suis capable de réussir le test si j'utilise juste le store dispatch pour lancer l'appel à l'action, mais cela va bien sûr à l'encontre du but de ce test. J'utilise Enzyme pour simuler l'événement keyup avec les données d'événement appropriées (code clé pour esc) mais je rencontre l'erreur ci-dessous.

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

Erreur: cette méthode est uniquement destinée à être exécutée sur un seul nœud. 0 trouvé à la place.

sur ReactWrapper.single (/Users/}name

sur ReactWrapper.simulate (/Users/[name

à Context. (/Users/[name E5E/repos/[repoName

reactjsmochareduxenzyme
13
Sam Sedighian

Cette erreur se produit lorsque, comme il est dit, vous l'exécutez avec un nombre de nœuds différent de 1.

Semblable à jQuery, votre appel find renverra un certain nombre de nœuds (c'est en fait un seul wrapper qui sait combien de nœuds votre sélecteur find a trouvé). Et vous ne pouvez pas appeler simulate contre 0 nœuds! Ou plusieurs.

La solution consiste alors à comprendre pourquoi votre sélecteur (le styles.container Dans wrapper.find(styles.container)) renvoie 0 nœuds, et assurez-vous qu'il renvoie exactement 1, puis simulate fonctionnera comme vous vous y attendez.

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

La méthode debug d'Enzyme est vraiment utile ici. Vous pouvez faire console.log(container.debug()), ou également console.log(container.html()) pour vous assurer que votre composant est rendu comme prévu pendant le test.

32
Tyler Collier