我正在尝试使用Jest和Enzyme测试组件,但是它对我不起作用,我在设置道具时遇到了问题。 我想完全掩盖它。
我正在阅读有关此内容,但我有些失落: Diference between state and props
这是我的controlNavs.js:
let title;
class ControlNavs extends Component {
componentWillMount() {
this.props.showProcessTypes(this.props.params.groupName);
}
detalles(idProcess, nameProcess) {
title = nameProcess;
this.props.listarValorFondo(idProcess);
}
showErrorMessage(errorText){
swal({
title: 'Spirit',
text: errorText,
type: 'error',
confirmButtonColor: '#337ab7',
confirmButtonText: 'Aceptar',
allowEscapeKey:false,
allowOutsideClick:false,
width: 400
}).then(() => this.props.ocultar());
}
renderProcessList() {
return this.props.processListNavs.map((proc) => {
let estaCargado= proc.estado == "CARGADO";
let esError= proc.estado=="ERROR";
return (
<tr key={proc.tipoProceso}>
<td>{proc.tipoProceso}</td>
<td>{esError ?
<a onClick={this.showErrorMessage.bind(this,proc.error)} style={{color: 'red'}}>{proc.estado}</a>
:replace(proc.estado)
}
</td>
<td>{estaCargado ?
<span className={proc.alerta ?
"glyphicon glyphicon-alert":
"glyphicon glyphicon-ok"}>
</span> : ""
}
</td>
<td key={proc.render}>{estaCargado ?
<input type="checkbox" onChange={this.props.checkIdNavs.bind(this,proc.proceso)}
defaultChecked={this.props.listaProcesos.find(item => item.id == proc.proceso).selected} />
: ""
}
</td>
<td>{estaCargado ?
<button name={"proceso"+proc.tipoProceso} type="button" className="btn btn-default btn-xs"
onClick={this.detalles.bind(this,proc.proceso, proc.tipoProceso)} data-toggle="modal"
data-target={"#myModalVf"}><span className="glyphicon glyphicon-list-alt" aria-hidden="true"/>
</button> : ""
}
</td>
</tr>
)
})
}
renderProcessTypesList() {
return this.props.listProcessTypes.map((processType) => {
return (
<tr key={processType.id}>
<td>{processType.descripcion}</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
)
})
}
render() {
if(this.props.showAlertprocessTypesUpdated) {
swal({
title: 'Spirit',
text: "Archivo Generado",
type: 'success',
confirmButtonColor: '#337ab7',
confirmButtonText: 'Aceptar',
allowEscapeKey:false,
allowOutsideClick:false,
width: 400
}).then(() => this.props.ocultar())
}
return (
<div>
<Control showProcess={this.props.showProcessNavs} generarArchivo={this.props.generarArchivo}
listaProcesos={this.props.listaProcesos} completed={this.props.completed} title={"Valores de Fondo"}
dateProcess={this.props.searchDate} service={"/navs-services/rest/valores-fondo/generate"}
isGenerate = {false} isSearch={true} isText={false} placeholderSearch="YYYY-MM-DD" />
<br />
<div id="listProcess" className="table-responsive row">
<table id="listProcessTable" className="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>Tipo Proceso</th>
<th>Estado</th>
<th>Valor Fondo Cero</th>
<th>Validar</th>
<th>Detalles</th>
</tr>
</thead>
<tbody>
{ this.props.processListNavs.length != 0 ? this.renderProcessList() : this.renderProcessTypesList() }
</tbody>
</table>
</div>
<div className="row">
<div className="pull-right">
<FileGenerate generarArchivo={this.props.generarArchivo} listaProcesos={this.props.listaProcesos}
completed={this.props.completed} service={"/navs-services/rest/valores-fondo/generate"}
forceGenerate={false} />
</div>
</div>
<Footer />
<ModalValorFondo details={this.props.details} dateProcess={this.props.searchDate} name={title}/>
</div>
);
}
}
function mapStateToProps(state) {
return {
listProcessTypes: state.showProcessTypes.list,
processListNavs: state.showProcessNavs.list,
searchDate: state.showProcessNavs.searchDate,
completed: state.procesosNavs.completed,
listaProcesos: state.procesosNavs.list,
showAlertprocessTypesUpdated: state.generarArchivo.showAlertprocessTypesUpdated,
details: state.listarValorFondo.listaValorFondo
}
}
export default connect(mapStateToProps, {showProcessNavs, generarArchivo, showProcessTypes, checkIdNavs,
findDetails, ocultar, listarValorFondo}
)(ControlNavs)
这是我目前的测试:
it('Debe montar el componente final con estado OTRO y hacer click', () => {
const store = mockStore({
showProcessTypes: {
list: []
},
showProcessNavs: {
list: [{ id: 0, tipoProceso: { descripcion: '' }, estado: 'OTRO' }],
dateProcess: ""
},
procesosNavs: {
list: [{ id: 0 }],
size: 0,
completed: false
},
generarArchivo: {
showAlertprocessTypesUpdated: false
},
listarValorFondo: {
listaValorFondo: [],
showAlertprocessTypesUpdated: false
}
});
const wrapper = mount(<ConnectedControlNavs store={store} params={{ groupName: 'name' }} />);
wrapper.find('.btn-xs').simulate('click');
});
但是我不知道该如何在课堂上测试“道具”,我在搜索其他问题,例如: [在此处输入链接说明] [Ejemplo git]
关于如何测试课程的任何想法吗?