如何使用Jest和Enzyme测试React组件中的Props

Question

我正在尝试使用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]

关于如何测试课程的任何想法吗？