Reactjs React Ag grid Jest&；如何测试是否调用gridApi方法

我想测试在加载数据加载状态时是否调用了

gridApi.showLoadingOverlay（）

以下是我的组件：

import { AgGridReact } from "ag-grid-react";
import React, { Component } from "react";
import { connect } from "react-redux";

class UserUsageDetails extends Component {
    constructor(props) {
        super(props);
        this.userUsageGridData = [];
    this.state = {
        columnDefs: [
            {
                headerName: 'User Id',
                field: 'userId',
            },
            {
                headerName: 'User Name',
                field: 'userName',
            },
            {
                headerName: 'User Type',
                field: 'userType',
            }
           
        ],
        defaultColDef: {
            width: 150,
            editable: false,
            filter: "agTextColumnFilter",
            floatingFilter: false,
            resizable: true,
        },
    } // end of this.state
} // end of constructor

onGridReady = (params) => {
    this.gridApi = params.api;
}

render() {


    // data is being fetched
    if (this.props.updateUserDetail.dataLoadState == "loading") {
        console.log("Loading Data ......");
        this.gridApi.showLoadingOverlay();
    }
    else {
        this.gridApi.hideOverlay();
    }


    return (
        <div>
            <div className="user-usage-details">
                <AgGridReact
                columnDefs={this.state.columnDefs}
                rowData={[]}
                pagination="true"
                paginationPageSize="10"
                defaultColDef={this.state.defaultColDef}
                onGridReady={this.onGridReady}
                />
            </div>
        </div>
        
    );
} // end of render()

} // end of UserUsageDetails class component

function mapStateToProps(state) {
    return {
        updateUserDetail: state.updateUserUsageDetail
    };
}

export default connect(mapStateToProps, null)(UserUsageDetails);

从“ag grid react”导入{AgGridReact}；
从“React”导入React，{Component}；
从“react redux”导入{connect}；
类UserUsageDetails扩展组件{
建造师（道具）{
超级（道具）；
this.userUsageGridData=[]；
此.state={
columnDefs：[
{
headerName:“用户Id”，
字段：“userId”，
},
{
headerName:'用户名'，
字段：“用户名”，
},
{
headerName:'用户类型'，
字段：“用户类型”，
}
],
默认值f：{
宽度：150，
可编辑：false，
过滤器：“agTextColumnFilter”，
浮动筛选器：false，
可调整大小：正确，
},
}//结束此操作。状态
}//构造函数的结尾
onGridReady=（参数）=>{
this.gridApi=params.api；
}
render（）{
//正在提取数据
if（this.props.updateUserDetail.dataLoadState==“加载”）{
console.log（“加载数据……”）；
this.gridApi.showLoadingOverlay（）；
}
否则{
this.gridApi.hideOverlay（）；
}
返回(

import React from "react";
import { shallow, mount } from 'enzyme';
import _userUsageDetails from './userUsageDetails';
import { AgGridReact } from "ag-grid-react";
const UserUsageDetails = _userUsageDetails.WrappedComponent;

let component;
let b; 
let agGridReact;
let node;

let props_InitialState_noDate = {
    updateUserDetail: {
        dataLoadState: "no date selected",
        error: "None"
    }
}

let props_fetchingData = {
    updateUserDetail: {
        dataLoadState: "loading",
        error: "None",
    }
}

const testData = [{"userId":"1234","userName":"A","userType":"Internal"}];

const setRowData = (wrapper, rowData) => {
    return new Promise(function (resolve, reject) {
      wrapper.setState({ rowData }, () => {
        wrapper.update();
        resolve();
      });
    })
}

const ensureGridApiHasBeenSet = (wrapper) => {
    return new Promise(function (resolve, reject) {
      (function waitForGridReady() {
        if (wrapper.instance().gridApi) {
          resolve(wrapper);
          return;
        }
        setTimeout(waitForGridReady, 1000);
      })();
    });
};
 

describe('User Usage Detail Loading State', () => {
    beforeAll((done) => {
        component = mount(<UserUsageDetails {...props_InitialState_noDate}/>);
        node = document.createElement('div');
        agGridReact= component.find(AgGridReact).instance();
        ensureGridApiHasBeenSet(component)
        .then(() => setRowData(component, testData))
        .then(() => done()) 
    });

    it('UserUsageDetails and AgGridReact should be defined', () => {
        expect(component).toBeDefined();
        expect(agGridReact.api).toBeTruthy();
        expect(agGridReact.api.showLoadingOverlay).toBeDefined();
        expect(component.instance().gridApi.showLoadingOverlay).toBeDefined();
    });

    it('should contain a title and ag grid', () => {
        expect(component.find(".user-usage-details").length).toEqual(1);
        expect(component.find(AgGridReact).length).toEqual(1);
        expect(component.find('.ag-overlay-loading-center').length).toEqual(0);
        component.setProps(props_fetchingData);
        // b = jest.spyOn(agGridReact.api, 'showLoadingOverlay');

        b = jest.spyOn(component.instance().gridApi, 'showLoadingOverlay');
        expect(component.render().find('.ag-overlay-loading-center').length).toEqual(1);
        expect(component.render().find(".ag-overlay-loading-center").text()).toEqual("Loading...");
        expect(b).toHaveBeenCalledTimes(1);
    });
});