Hata: Bu yöntemin yalnızca tek düğümde çalışması amaçlanmıştır. 0 yerine

Question

bulundu Bir bileşenin bir anahtar bağlama özelliğini test ediyorum. Bileşen oldukça basit, 'anahtar' için olay dinleyicisi ve bileşeni gizleyecek bir redux eylemi başlatır. Kodumu sadece ilgili bilgilere temizledim. Ben sadece mağaza gönderisini eylem çağrısını yapmak için kullanırsam, ancak bu testin amacını alt edeceğinden test geçidini yapabilirim. 'Olay' olayını uygun olay verileriyle ('esc' için anahtar kodu) simüle etmek için Enzim'i kullanıyorum ancak aşağıdaki hatayı görüyorum.

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

O hata diyor, sen benzer 1.

dışındaki düğümlerin herhangi bir sayı ile çalıştırdığınızda, olur

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

jQuery, find numaralı telefon numaranız bazı düğüm sayısını döndürecektir. s (gerçekten find seçicinizin kaç tane düğüm bulduğunu bilen tek bir sarmalayıcı). Ve 0 düğümlerine karşı simulate'u arayamazsınız! Ya da çoklu.

çözeltisi daha sonra da seçici (wrapper.find(styles.container) içinde styles.container) 0 düğümleri dönüyor nedenini anlamaya ve tam olarak 1 döndürür ve sonra simulate beklediğiniz gibi çalışacaktır emin olmaktır.

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

Enzimlerin debug yöntem burada gerçekten yararlıdır. Bileşeninizin test sırasında beklendiği gibi işlediğinden emin olmak için console.log(container.debug()) veya console.log(container.html()) yapabilirdiniz.