酵素エラー：この方法は、単一ノードでのみ実行することを目的としています。 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); 
    }); 
}); 

を促すことは、「」私は信じているタグが、まだ...

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

にインポートし変更しました。