Errore: questo metodo è pensato solo per essere eseguito su un singolo nodo. 0 trovato invece

Question

Sto testando una funzione di combinazione di tasti in un componente. Il componente è piuttosto semplice, listener di eventi per la "chiave" e attiva un'azione di ridondanza che nasconderà il componente. Ho ripulito il mio codice qui solo per informazioni rilevanti. Sono in grado di superare il test se utilizzo la spedizione del negozio per effettuare la chiamata d'azione, ma ovviamente ciò non consentirà lo scopo di questo test. Sto usando Enzyme per simulare l'evento "keyup" con i dati dell'evento appropriati (keycode per "esc") ma ho trovato l'errore qui sotto.

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. (/Users/[name]/repos/[repoName]/webpack/test.config.js:162808:55 <- webpack:///src/test/components/MyComponent-test.js:39:40)

Answer 1

Questo errore si verifica quando, come si dice, lo si esegue con qualsiasi numero di nodi diversi da 1.

Simile a jQuery, la tua chiamata find restituirà un certo numero di nodi s (in realtà è un singolo wrapper che conosce quanti nodi ha trovato il tuo selettore find). E non puoi chiamare simulate contro 0 nodi! O più.

La soluzione quindi è quello di capire il motivo per cui la vostra selezione (il styles.container in wrapper.find(styles.container)) sta tornando 0 nodi, e assicurarsi che ritorni esattamente 1, e quindi simulate funzionerà come previsto. Metodo

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

dell'enzima debug è veramente utile qui. È possibile eseguire console.log(container.debug()) o console.log(container.html()) per assicurarsi che il componente esegua il rendering come previsto durante il test.