reactjs - UseEffect 钩子(Hook)的 Jest 测试用例

Question

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

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

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

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