如何覆盖 react-hooks 组件内的函数测试 - Enzyme/Jest

Posted 2023-03-13

【中文标题】如何覆盖 react-hooks 组件内的函数测试 - Enzyme/Jest

【英文标题】：How to cover the tests for a function inside a react-hooks component - Enzyme/Jest

【发布时间】：2021-01-09 13:09:07

【问题描述】：

我对测试很陌生。

考虑我有一个下面的组件

export default function ResolutionCount( componentUsedIn ) 
    const dispatch = useDispatch();

    const userID = useSelector(
        (state) => state.userInfoReducer.userInfo[0]["user_id"]
    );

    useEffect(() => 

        dispatch(
            type: SET_RESOLUTION_STATUS_COUNT_BAR_CHART_FETCHING_DATA,
            payload: true,
        );
        dispatch(getResolutionStatusCount([]));

        return () => 
            dispatch(
                type: SET_RESOLUTION_STATUS_COUNT_BAR_CHART,
                payload: 
                    barChartData: [],
                    barChartCategories: [],
                    resolution_status_environment: [],
                ,
            );
        ;
    , []);

    const handleSelection = (selectedData) => 

        dispatch(
            type: SET_RESOLUTION_STATUS_COUNT_SELECTED_ENV,
            payload: selectedData,
        );

        dispatch(
            getResolutionCount(
                [],
                startDate,
                endDate,
                false,
                selectedData
            )
        );
    ;

    return (
        <Fragment>
            <Space>
                <DateRangePicker
                    componentUsedIn=componentUsedIn
                ></DateRangePicker>
                <Selection
                    options=environment
                    handleSelection=handleSelection
                ></Selection>
            </Space>
            <BarChart componentUsedIn=componentUsedIn></BarChart>
        </Fragment>
    );

在此选择中，DateRangePicker 和 BarChart 组件用React.memo() 包裹。现在对于单元测试，我实际上是在使用 jest 和酵素并在酵素的浅层中运行 useEffect 我正在使用另一个名为 jest-react-hooks-shallow

的包

我实际上想测试ResolutionCount 组件中的handleSelection 函数。因为该功能没有被测试用例覆盖。我正在阅读有关如何调用此函数的酶文档，我发现如果它是基于类的组件，我们可以获取包装器的实例并调用该函数。但是在 react hooks 组件中，我们应该如何测试组件内部的功能。

我浏览了Testing React Functional Component with Hooks using Jest，但这没有帮助。

我还了解到测试内部实现并不是最佳实践。在那种情况下，这个功能不会覆盖测试覆盖率，对吧？这样可以吗？

任何人都可以帮助/建议我吗？

如果此问题重复，请原谅，提前谢谢！

【参考方案1】：

在测试功能组件时，我认为这通常是一种很好的方法，您尝试测试组件的行为，而不是实现。

因此，对于您的情况，想法是模拟选择（我想它本质上是一个 html select）并检查一些行为是使用 selectedData 更新您的 redux 存储的结果。

【讨论】：

感谢您的回复。所以我想做的就是把handleSelection函数移到组件外面去测试一下。

在这种情况下：用 jest/enzyme 测试 Redux 非常简单 :)