효소 오류 :이 방법은 단일 노드에서만 실행됩니다. 0 찾았습니다. 대신

Question

나는 "오류 :이 메서드는 단일 노드에서만 실행되도록 설계되었습니다."와 같이 오류가 발생하면 함수를 실행하는 링크를 클릭하여 정렬을 토글하는 간단한 구성 요소를가집니다. "

여기

import React, { Component, PropTypes } from 'react'; 
import { sortGames } from '../actions'; 
import { connect } from 'react-redux'; 


class SortList extends Component { 
    constructor(props) { 
     super(props); 
     this.onSortGames = this.props.onSortGames.bind(this); 
    } 
    componentWillMount(){ 
     this.setState({ 
      sortByIncrease: false 
     }) 
    } 
    render() { 
     return (
      <div className="sort"> 
       <span>Sort by: 
        <a href="#" onClick={e => { 
         e.preventDefault(); 
         this.props.onSortGames(this.props.filter, this.state.sortByIncrease); 
         this.setState({ 
          sortByIncrease: !this.state.sortByIncrease 
         }); 
        }}> 
         { (this.state.sortByIncrease) ? "Decrease" : "Increase" } 
        </a> 
       </span> 
      </div> 
     ) 
    } 
} 

SortList.propTypes = { 
    onSortGames: PropTypes.func.isRequired 
}; 

const mapStateToProps = (state) => ({ 
    games: state.games 
}); 
const mapDispatchToProps = (dispatch) => ({ 
    onSortGames(filter, asc) { 
     dispatch(sortGames(filter, asc)); 
    } 
}); 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SortList); 

내 구성 요소가 내 테스트 스크립트, CONSOLE.LOG입니다 (wrapper.debug());

import React from 'react'; 
import {expect} from 'chai'; 
import { shallow, mount } from 'enzyme'; 
import sinon from 'sinon'; 
import SortList from '../components/SortList'; 
import configureStore from '../configureStore'; 

describe('SortList',() => { 
    const store = configureStore(); 

    const props = { 
     filter: "all", 
     sortByIncrease: false, 
     onSortGames : (a,b) => {} 
    }; 

    it('should render sort list component',() => { 
     const wrapper = shallow(<SortList {...props} store={store}></SortList>); 
     expect(wrapper.length).to.equal(1); 
    }); 

    it('should call sorting function when clicked',() => { 
     const onSortGames = sinon.spy(); 
     const wrapper = shallow(<SortList {...props} store={store}></SortList>); 
     console.log(wrapper.debug()); 
     wrapper.find('a').simulate('click'); 
     expect(onSortGames.calledOnce).to.equal(true); 
    }); 
}); 

메시지를 표시 내가 잘못이 "A"내가 믿는 태그 만에 도달해야합니다 뭐하는 거지 여전히 ...

Answer 1

당신은 당신의 shallow 기능에 그것을 소개하는 sinon 스파이를 만드는 것이 아니라,. 구성 요소에 전달하기 전에 onSortGames 스파이를 소품으로 전달해야합니다. 지금 바로 클릭 할 때 describe 절의 속성에 나열된 함수를 호출하는 것입니다. onSortGames : (a,b) => {}.

직접 JSX에 스파이를 적용 해보십시오, 뭔가 같은 :

it('should call sorting function when clicked',() => { 
     const onSortGames = sinon.spy(); 
     const wrapper = shallow(<SortList onSortGames={onSortGames} {...props} store={store}></SortList>); 
     console.log(wrapper.debug()); 
     wrapper.find('a').simulate('click'); 
     expect(onSortGames.calledOnce).to.equal(true); 
    }); 

Answer 2

나는 연결 구성 요소에 자식 요소를 찾을 수없는 얕은 때문에 별도로 구성 요소와 연결 부품을 수출 알아보십시오. 그들은 REDUX 예에 어떻게 여기

treeview example node component 그래서 내가

export class SortList extends Component { 

및

export default connect(
     mapStateToProps, 
     mapDispatchToProps 
    )(SortList); 

에

에

class SortList extends Component { 

처럼 내 요소를 변경입니다

const SortListConnected = export default connect(
     mapStateToProps, 
     mapDispatchToProps 
    )(SortList); 
    export default SortListConnected; 

내 테스트 스크립트는 잘 작동() 것을 발견 한 후

import {SortList} from '../components/SortList'; 

에 가져올 변화.