Question

我正在使用React和Javascript在我的React Typescript应用程序中构建一个测试套件。

但是，我的主要组件中嵌入了一个Ag-Grid组件以及许多操作按钮。但是，操作按钮绑定到网格选择，因此，如果单击“批准”，它将首先检查以查看网格中已选择的内容，然后通过分派操作将条目发送到Redux。

我可以断言传递给调度动作回调的内容，但是问题是我看不到如何使用Jest和Enzyme模仿选择。这些似乎只使用浅层/安装来呈现静态内容，而我看不到如何使之具有交互性。

这是否有可能，或者我应该使用其他工具-甚至以不同的方式构建代码以使其可以进行单元测试？

一个例子

interface IItemGridProps {
  signoffApprove : (entries:ItemEntity[]) => void,
  items: ItemEntity[]  
}

export class ItemGrid extends React.Component<IItemGridProps,IItemGridState> {
  private gridApi: GridApi;

  private doApprove()
  {
      if (this.gridApi.getSelectedNodes().length > 0)
      {
        this.props.signoffApprove(this.getSelectedEntries());
      }
  }

  private getSelectedEntries() {
    return this.gridApi.getSelectedNodes().map(s => s.data)
  }

  private onGridReady(params: any) {
    this.gridColumnApi = params.columnApi;
    this.gridApi = params.api;
  }

  public render() {
    <div className="ag-dark">
          <AgGridReact 
            gridOptions={this.props.gridOptions} 
            rowData={this.props.items}
            onGridReady={this.onGridReady}    
            onModelUpdated={this.initColumnSize}       
          />
        </div>
        <div class
  }

测试使用Jest / Enzyme反应AG-Grid

0 个答案: