reactjs - 如何使用 react-data-grid 测试功能组件

Question

我使用 React-data-grid (链接)创建了一个带有反应的数据网格

我的代码如下：

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();
    });

});

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

标签： reactjsunit-testingjestjsenzymereact-data-grid