在 react JS 中 UseEffect 钩子的开玩笑测试用例

Question

我正在尝试为 useEffect react 钩子编写 Jest-enzyme 测试用例，但我真的很迷茫，我想为 2 个 react 钩子编写测试用例，一个进行异步调用，另一个使用 usestate 钩子对数据进行排序和设置数据，我的文件在这里。

export const DatasetTable: React.FC<DatasetTableProps> = ({id, dataset, setDataset, datasetError, setDataSetError}) => {
const [sortedDataset, setSortedDataset] = useState<Dataset[]>();
useEffect(() => {
fetchRegistryFunction({
route:`/dataset/report?${constructQueryParams({id})}`,
setData: setDataset,
setError: setDataSetError
})();
}, [id, setDataset, setDataSetError]});
useEffect(() => {
if(dataset) {
const sortedDatasetVal = [...dataset];
sortedDatasetVal.sort(a, b) => {
const dateA: any = new Date(a.date);
const dateA: any = new Date(a.date);
return dataA - dateB;
}
setSortedDataset(sortedDatasetVal);
}
}, [dataset])
return (
<div>
<DatasetTable
origin="Datasets"
tableData={sortedDataset}
displayColumns={datasetColumns}
errorMessage={datasetError}
/>
</div>
);
}

Answer 1

酶不是进行此类测试的正确库。

https://react-hooks-testing-library.com/是您需要的。

在您的情况下，我会将所有提取的数据提取到"自定义钩子"，然后独立于您的 UI 表示层进行测试。

这样做可以更好地分离关注点，并且您的自定义钩子可以在其他类似的反应组件中使用。

Answer 2

我设法让酶与数据获取useEffect钩子一起工作。但是，它确实要求您允许将 dataFetching 函数作为 props 传递给组件。

以下是我将如何测试您的组件，考虑到它现在接受fetchRegistryFunction作为道具：

const someDataSet = DataSet[] // mock your response object here.
describe('DatasetTable', () => {
let fetchRegistryFunction;
let wrapper;
beforeEach(async () => {
fetchRegistryFunction = jest.fn()
.mockImplementation(() => Promise.resolve(someDataSet));
await act(async () => {
wrapper = mount(
<DatasetTable
fetchRegistryFunction={fetchRegistryFunction}
// ... other props here
/>,
);
});
// The wrapper.update call changes everything, 
// act seems to not automatically update the wrapper, 
// which lets you validate your old rendered state
// before updating it.
wrapper.update(); 
});
afterEach(() => {
wrapper.unmount();
jest.restoreAllMocks();
});
it('should display fetched data', () => {
expect(wrapper.find(DatasetTable).props().tableData)
.toEqual(someDataSet);
});
});

希望这有帮助！