我使用 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();
});
});
我想测试以确保网格的排序正确(按升序/降序排序)