Question

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

export const DatasetTable：React.FC =（{id，数据集，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);

UseEffect挂钩的开玩笑的测试用例

1 个答案: