Cómo probar métodos y devolución de llamada usando Mocha, Chai y Enzyme en React-Redux
Tengo que escribir casos de prueba unitarios paraPlayerList
contenedor yPlayer
componente. Escribir casos de prueba para ramas y accesorios está bien, pero ¿cómo pruebo los métodos del componente y la lógica dentro de ellos? La cobertura de mi código está incompleta porque los métodos no se prueban.
Guión:
El componente padre pasa una referencia a su métodoonSelect
como una devolución de llamada al componente hijo. El método se define enPlayerList
componente, peroPlayer
está generando el evento onClick que lo llama.
Componente principal / contenedor:
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);
Componente hijo:
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;