reactjs - test - react redux jest

Error: este método solo debe ejecutarse en un solo nodo. 0 encontrado en su lugar

Question

Estoy probando una característica de vinculación en un componente. El componente es bastante simple, el detector de eventos para el ''keyup'' y dispara una acción de reducción que ocultará el componente. He limpiado mi código aquí solo para información relevante. Puedo hacer que la prueba pase si solo uso el despacho de la tienda para hacer la llamada de acción, pero eso, por supuesto, frustrará el propósito de esta prueba. Estoy usando Enzyme para simular el evento ''keyup'' con los datos de eventos apropiados (código clave para ''esc'') pero me aparece el siguiente error.

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: este método solo debe ejecutarse en un solo nodo. 0 encontrado en su lugar.

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

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

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

Answer 1

Ese error ocurre cuando, como se dice, lo ejecuta con cualquier cantidad de nodos distintos de 1.

De forma similar a jQuery, su llamada de find devolverá cierta cantidad de nodos (en realidad, es un único contenedor que sabe cuántos nodos ha encontrado su selector de find ). ¡Y no puedes invocar simulate contra 0 nodos! O múltiple.

La solución es averiguar por qué su selector ( styles.container en wrapper.find(styles.container) ) está devolviendo 0 nodos, y asegúrese de que devuelve exactamente 1, y luego simulate funcionará como esperaba.

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

El método de depuración de Enzyme es realmente útil aquí. Puede hacer console.log(container.debug()) , o también console.log(container.html()) para asegurarse de que su componente se esté procesando como se esperaba durante la prueba.