Reactjs 如何使用react数据网格测试功能组件

我使用react data grid（）创建了一个带有react的数据网格。

我的代码如下：

import React, { useState } from "react";
import ReactDataGrid from 'react-data-grid';

const ROW_COUNT = 20;
const MIN_WIDTH = 100;

const defaultColumnProperties = {
    resizable: true,
    sortable: true
};

const columns = [
    {
        key: "eventTypeNameI18n",
        name: "Type",
    },
    {
        key: "nameI18n",
        name: "Name",
        width: 160
    },
    {
        key: "dateCreated",
        name: "Time",
        width: 220
    },
    {
        key: "locationNameI18n",
        name: "Location",
        width: 200
    }
].map(col => ({...col, ...defaultColumnProperties}));

const sortRows = (initialRows, sortColumn, sortDirection) => rows => {
    const comparer = (a, b) => {
        if (sortDirection === "ASC") {
            return a[sortColumn] > b[sortColumn] ? 1 : -1;
        } 
        else if (sortDirection === "DESC") {
            return a[sortColumn] < b[sortColumn] ? 1 : -1;
        }
    };
    return sortDirection === "NONE" ? initialRows : [...rows].sort(comparer);
};

function DataGrid({initialRows}) {

    const [rows, setRows] = useState(initialRows);

    return (

        <ReactDataGrid
            id="EventDataGrid"
            columns={columns}
            rowGetter={i => rows[i]}
            rowsCount={ROW_COUNT}
            minColumnWidth={MIN_WIDTH}
            onGridSort={(sortColumn, sortDirection) =>
                setRows(sortRows(initialRows, sortColumn, sortDirection))
            }
        />

    );
}

export default DataGrid;

import React，{useState}来自“React”；
从“react数据网格”导入ReactDataGrid；
常量行计数=20；
最小宽度常数=100；
常量defaultColumnProperties={
可调整大小：正确，
可排序：正确
};
常量列=[
{
键：“eventTypeNameI18n”，
名称：“类型”，
},
{
密钥：“nameI18n”，
姓名：“姓名”，
宽度：160
},
{
键：“dateCreated”，
名称：“时间”，
宽度：220
},
{
键：“locationNameI18n”，
名称：“地点”，
宽度：200
}
].map（col=>（{…col，…defaultColumnProperties}））；
const sortRows=（initialRows、sortColumn、sortDirection）=>rows=>{
常量比较器=（a，b）=>{
如果（排序方向==“ASC”）{
返回a[sortColumn]>b[sortColumn]？1:-1；
} 
else if（sortDirection==“DESC”）{
返回a[sortColumn]
setRows（sortRows（初始行、sortColumn、sortDirection））
}
/>
);
}
导出默认数据网格；

我是编写单元测试的新手，从最近开始一直在编写非常基本的单元测试。我想知道使用Jest/酶测试onGridSort方法的最佳方法是什么

在我的测试中，我目前有以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme, {mount} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import EventsGrid from '../EventsGrid';
import sampleData from './sampleData/transformedEventSample';

Enzyme.configure({adapter: new Adapter()});


describe('Tests for <EventDataGrid/>', () => {

    it('sort data grid by ascending ', () => {

        const wrapper = mount(<EventsGrid initialRows={sampleData}/>);
        const instance = wrapper.instance();
        jest.spyOn(instance, 'sortRows');

        const column = 'eventTypeNameI18n';
        const sortDirection = 'ASC';

        wrapper.find('#EventDataGrid').at(1).prop('onGridSort')(column, sortDirection);

        expect(instance.sortRows).toHaveBeenCalled();

    });

    it('sort data grid by descending', () => {

        const wrapper = mount(<EventsGrid initialRows={sampleData}/>);
        const instance = wrapper.instance();
        jest.spyOn(instance, 'sortRows');

        const column = 'eventTypeNameI18n';
        const sortDirection = 'DESC';

        wrapper.find('#EventDataGrid').at(1).prop('onGridSort')(column, sortDirection);

        expect(instance.sortRows).toHaveBeenCalled();
    });

});

从“React”导入React；
从“react dom”导入react dom；
从“酶”导入酶，{mount}；
从'enzyme-Adapter-react-16'导入适配器；
从“../EventsGrid”导入EventsGrid；
从“./sampleData/transformedEventSample”导入sampleData；
configure（{adapter:newadapter（）}）；
描述（'测试'，（）=>{
它（'按升序对数据网格排序'，（）=>{
const wrapper=mount（）；
const instance=wrapper.instance（）；
jest.spyOn（例如，“sortRows”）；
const column='eventTypeNameI18n'；
const sortDirection='ASC'；
wrapper.find（“#EventDataGrid”）.at（1.prop（'onGridSort'）（列，sortDirection）；
expect（instance.sortRows）.tohaveBeenCall（）；
});
它（'按降序对数据网格排序'，（）=>{
const wrapper=mount（）；
const instance=wrapper.instance（）；
jest.spyOn（例如，“sortRows”）；
const column='eventTypeNameI18n'；
const sortDirection='DESC'；
wrapper.find（“#EventDataGrid”）.at（1.prop（'onGridSort'）（列，sortDirection）；
expect（instance.sortRows）.tohaveBeenCall（）；
});
});

我想测试以确保网格的顺序正确（按升序/降序排列）