reactjs त्रुटि: यह विधि केवल एकल नोड पर चलने के लिए होती है इसके बजाय 0 पाया



mocha redux (1)

यह त्रुटि तब होती है जब, जैसा कि कहते हैं, आप इसे 1 के अलावा अन्य नोड्स के साथ चलाते हैं।

JQuery के समान, आपका find कॉल कुछ नोड्स लौटाएगा (वास्तव में यह एक एकल आवरण है जो जानता है कि आपके खोजकर्ता को कितने नोड मिले हैं)। और आप 0 नोड्स के खिलाफ simulate नहीं कर सकते! या एकाधिक

इसका समाधान यह है कि आपके चयनकर्ता ( styles.container wrapper.find(styles.container) 0 नोड्स लौट रहे हैं, और यह सुनिश्चित करें कि यह बिल्कुल 1 रिटर्न करता है, और फिर simulate रूप में आपकी अपेक्षा के अनुसार काम करेगा

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()) कर सकते हैं, यह सुनिश्चित करने के लिए कि आपके घटक परीक्षण के दौरान अपेक्षित प्रतिपादन कर रहे हैं।

मैं एक घटक में एक कीबाइंडिंग सुविधा का परीक्षण कर रहा हूँ। घटक 'कुंजी' के लिए एक साधारण, घटना श्रोता है और घटक को छुपाता है जो घटक को छुपाता है। मैंने अपने कोड को केवल प्रासंगिक जानकारी में साफ किया है मैं परीक्षा पास करने में सक्षम हूं यदि मैं कार्रवाई कॉल करने के लिए सिर्फ स्टोर डिस्पैच का उपयोग करता हूं, लेकिन निश्चित रूप से इस परीक्षण के उद्देश्य को हार जाएगा। मैं उपयुक्त घटना डेटा ('esc' के लिए कुंजीकोड) के साथ 'कुंजीप' घटना को अनुकरण करने के लिए एनज़िम का उपयोग कर रहा हूं, लेकिन मुझे नीचे दिया गया त्रुटि मिलती है I

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 पाया

ReactWrapper.single पर (/Users/[name]/repos/[repoName]/webpack/test.config.js:145418 <- वेबपैक: ///~/enzyme/build/ReactWrapper.js: 10 99: 0)

ReactWrapper.simulate पर (/Users/[name]/repos/[repoName]/webpack/test.config.js:4886:15 <- वेबपैक: ///~/enzyme/build/ReactWrapper.js: 531: 0)

संदर्भ में (/Users/[name]/repos/[repoName]/webpack/test.config.js:162808:55 <- वेबपैक: ///src/test/components/MyComponent-test.js: 39: 40)





enzyme