UseEffect钩子的Jest测试用例

Question

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

export const DatasetTable： React.FC = ({id， dataset， setDataset， datasetError， setDataSetError}( => { const [sortedDataset， setSortedDataset] = useState((;

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

}

当我编写如下测试用例时，

describe('<DatasetTable />', () => {
let wrapper: shallowWrapper;
const DatasetVar = reportMock[0] // its imported
const props: DatasetTableProps = {
id: 23,
dataset: DatasetVar,  //defined above
setDataset: jest.fn(),
datasetError: undefined,
setDatasetError: jest.fn()
};
jest.mock('./index.tsx', (props: any) => (
<span id='faked-dataset-table'>{JSON.stringify(props.dataset)}</span>
));
jest.mock('./api.ts', () => {
fetchRegistryFUnction: jest.fn(() => promise.resolve({data: {}}))
});
const expectedSortedData = [
{
"id": 23,
"datasetId": 7086,
"snapshotCOntext": "sksfhasj"
"datasetCount": 2198,
"completion": 0.0
},
{
"id": 24,
"datasetId": 76,
"snapshotCOntext": "23-04-2019"
"datasetCount": 2198,
"completion": 0.0
}
];
it('passes sorted data to datasetTable', () => {
const wrapper =  mount(<DatasetTable {...props}/>);
expect(fetchRegistryFunction).tohavebeencalledwith({
route: 'dataset/report/datasetVersionId=23',
setData: jest.fn(),
setError: jest.fn()
});
expect(JSON.parse(wrapper.find("faked-dataset-table").text())).toEqual(expectedSortedData);
})

}(;

我收到此错误，api.fetchRegistryFunction 不是一个函数

Answer 1

这是我用来测试钩子的钩子包装器。

import { mount, shallow } from 'enzyme';
import React from 'react';
interface ResultProps<T> {
result: T;
}
function Result<T>({ result }: ResultProps<T>) {
return <span data-output={result} />;
}
export function testHook<A, R>(runHook: (...args: A[]) => R, flushEffects = false): R {
function HookWrapper() {
const output = runHook();
return <Result result={output} />;
}
const wrapper = flushEffects ? mount(<HookWrapper />) : shallow(<HookWrapper />);
return wrapper.find(Result).props().result;
}

然后你可以像这样使用它：

const { availableVariants } = testHook(() =>
useProductVariants({ variantAttributes, variants })
);

然后像往常一样测试结果：

expect(availableVariants).toEqual(expected);