How to cover the tests for a function inside a react-hooks component - Enzyme/Jest

Question

I'm very new to testing.

Consider I have a below component

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

}

In this Selection, DateRangePicker and BarChart components are wrapped with React.memo(). Now for unit testing, I'm actually using jest and enzyme and to run useEffect in enzyme's shallow I'm using another package called jest-react-hooks-shallow

I actually want to test the handleSelection function inside ResolutionCount component. Because that function is not being covered by test cases. I was going through enzymes's docs on how to call this function and I found that if it was a class-based component we could get the instance of the wrapper and call the function. But in the react hooks components how should we test the functions inside a component.

I went through Testing React Functional Component with Hooks using Jest and this did not help.

I also read about it's not best practice to test internal implementations. In that case, test coverage will not be covered for this function right? Is that ok to do?

Can anyone please help/advice me?

Kindly excuse if this question is repeated and Thank you in advance!

k-wasilewski k-wasilewski · Accepted Answer · 2020-09-24T18:50:08

When it comes to testing functional components, and I think it's generally a fine approach, you try to test the component's behaviour, not the implementation.

So, when it comes to your case, the idea would be to simulate the selection (I suppose it's essentially a html select) and check some behaviour being the consequence of updating your redux store with the selectedData.

How to cover the tests for a function inside a react-hooks component - Enzyme/Jest

1 Answers