Ich muss Unit-Testfälle für ein @ schreibPlayerList container undPlayer Komponente. Das Schreiben von Testfällen für Verzweigungen und Requisiten ist in Ordnung, aber wie teste ich die Methoden der Komponente und die darin enthaltene Logik? Meine Codeabdeckung ist unvollständig, da die Methoden nicht getestet wurden.

Szenario

Parent-Komponente übergibt einen Verweis auf ihre MethodeonSelect als Rückruf zur untergeordneten Komponente. Die Methode ist in @ definierPlayerList Komponente, aberPlayer generiert das Ereignis onClick, das es aufruft.

Parent Component / Container:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {selectTab} from '../actions/index';
import Player from './Player';

class PlayerList extends Component {    
    constructor(props){
        super(props);
    }

    onSelect(i) {
        if (!i) {
            this.props.selectPlayer(1);
        }
        else {
            this.props.selectPlayer(i);
        }
    }

    createListItems(){      
        return this.props.playerList.map((item, i)=>{
            return (                
                    <Player key={i} tab={item} onSelect={() => this.onSelect(item.id)} />
                )
        });
    }

    render() {
        return(
            <div className="col-md-12">
                <ul className="nav nav-tabs">                   
                    {this.createListItems()}
                </ul>   
            </div>
        )   
    }   
}

function mapStateToProps(state){
  return {
    playerList: state.playerList 
  }
}
function matchDispatchToProps(dispatch){
  return bindActionCreators({selectPlayer: selectPlayer}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(PlayerList);

Kinderkomponente:

    import React, { Component } from 'react';
    class Player extends Component {    
        constructor(props){
            super(props);
        }

        render() {
            return(
                <li className={this.props.player.selected?'active':''}>
                    <a href="#"  onClick={() => this.props.onSelect(this.props.player.id)}>
                       <img src={this.props.player.imgUrl}     className="thumbnail"/>
                        {this.props.player.name}
                    </a>
                </li>
            )   
        }   
    }
    export default Player;