오류: 이 메서드는 단일 노드에서만 실행됩니다.대신 0이 발견됨

오류: 이 메서드는 단일 노드에서만 실행됩니다.대신 0이 발견됨

컴포넌트의 키바인딩 기능을 테스트하고 있습니다.컴포넌트는 비교적 심플한 것으로, Event Listener는keyup컴포넌트를 숨기는 리덕스 액션을 기동합니다.

여기서 코드를 정리한 것은 관련 정보뿐입니다.스토어 디스패치만으로 액션 콜을 실시하면 합격할 수 있지만, 물론 이 테스트의 취지에 어긋납니다.나는 효소를 사용하여 시뮬레이션을 하고 있다.keyup적절한 이벤트 데이터를 포함한 이벤트(키코드)esc)는, 다음의 에러가 발생하고 있습니다.

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

이 오류는 1 이외의 임의의 수의 노드에서 실행할 때 발생합니다.

jQuery와 마찬가지로find콜은 몇 개의 노드를 반환한다(실제로 1개의 래퍼에 의해 몇 개의 노드가 반환되는지를 알 수 있습니다).find실렉터가 검출되었습니다).그리고 당신은 전화할 수 없다.simulate0노드에 대해서!아니면 여러 개일 수도 있고.

그 다음 솔루션은 선택기(선택기)를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())테스트 중에 컴포넌트가 예상대로 렌더링되는지 확인합니다.

도달하려는 요소가 다른 레벨에 있기 때문에 노드를 찾을 수 없습니다.클래스 ID별로 특정 요소를 선택합니다.그리고 이거 먹어봐

wrapper.find('LoginForm')
  .dive()
  .find('.CLASS_NAME_OF_ELEMENT')
  .simulate('click');

다음과 같은 HTML 요소가 여러 개 있는 경우

 <button className = "age_up" onClick = {() => dispatch(onAgeUpAction())}> 
        Age UP 
        </button> 
        <button className = "age_down" onClick = {() => dispatch(onAgeDownAction())}>
             Age Down 
       </button> 
        <button type = "button"onClick = {handleClick}> 
        Fetch Post 
        </button> 

일반적인 질문으로 호출하고 있습니다.

wrapper.find('button').simulate('click');

3개의 노드가 모두 반환됩니다.고유 ID 또는 ClassNames로 호출합니다.

안녕하세요, 저는 1번 사용해요. 먼저 컨테이너를 가져오세요.버튼을 가져오세요.3번 버튼을 누르세요.플롭을 온으로 실행하세요.클릭

 it('should Click on edit row', () => {
  const containerButton =  wrapper.find('.editCell')
  const editButton = containerButton.find('.buttonAlignRight')  
  editButton.props().onClick() 
  expect(wrapper.find('input')).toBeVisible()
})

언급URL : https://stackoverflow.com/questions/37381916/error-this-method-is-only-meant-to-be-run-on-single-node-0-found-instead