reactjs - react-data-grid を使用して関数コンポーネントをテストする方法

Question

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;

私は単体テストを書くのは初めてで、最近は非常に基本的な単体テストを書いています。Jest/Enzyme を使用して 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();
    });

});

グリッドが正しく並べられていることを確認するためにテストしたい (昇順/降順)