0

I have a react hook which is making use of a function inside a useeffect. The look looks like this:

export function getWidgetSections(props: WidgetSectionProps): [Array<GetWidgets_getWidgets>, boolean] {
    const { selectedContext, filters, nestedFilters, selectedLensId } = props
    const [loading, setLoading] = useState(false)
    const [widgetList, setWidgetSection] = useState([])

    useEffect(() => {
        async function setSelectedWidgetSection() {
            setLoading(true)
            const data = await loadData(....)
            .
            .
            .
            let widgetListToSet;
            if (data?.getWidgets) {
                const widgetList = JSON.parse(JSON.stringify(data.getWidgets))
                widgetListToSet = await manipulateWidgetList(widgetList, selectedLensId, selectedContext)
            } else {
                widgetListToSet = []
            }
            setWidgetSection(widgetListToSet)
            setLoading(false)
        }
        setSelectedWidgetSection()
    }, [JSON.stringify(props)])

    return [widgetList, loading]
}

export async function manipulateWidgetList(widgetList: Array<GetWidgets_getWidgets>, selectedLensId: string, selectedContext?: Context): Promise<GetWidgets_getWidgets[]> {
    console.log("inside actual function")

    .
    .
    .

    return widgetList.sort((a, b) => a.displayOrder - b.displayOrder)
}

My intention is to mock out manipulateWidgetList and make sure it is called and to also test it seprately.

Here are the relevant parts of the unit test file

import * as GetWidgetSections from "../utlities/GetListOfWidgetSections"

describe('GetListOfWidgetSections function', () => {
    let mockedManipulateWidgetList;

    beforeEach(() => {
        ...other mocks
        console.log("setting up mocked function");
        mockedManipulateWidgetList = jest.spyOn(GetWidgetSections, 'manipulateWidgetList')
            .mockImplementationOnce(() => {
                console.log("inside mocked function")
                return Promise.resolve(getCostWidgetsResponses['data']['getWidgets'] as GetWidgets['getWidgets'])
            })
    })
    it('Returns business function widget and subwidget as is if on top level', async () => {
        const { result, waitForNextUpdate } = renderHook(() => GetWidgetSections.getWidgetSections({
            filters: [],
            nestedFilters: [],
            selectedLensId: '1',
            selectedContext: null
        }))
        await waitForNextUpdate();
    })

Now in the test I should expect a console log of inside mocked function but I am getting a console.log of inside actual function. Any ideas on what I could be doing wrong here?

Tushar Chutani
  • 1,500
  • 5
  • 25
  • 56
  • Does this answer your question? [How to mock functions in the same module using jest](https://stackoverflow.com/questions/45111198/how-to-mock-functions-in-the-same-module-using-jest) – Donovan Hiland Oct 07 '21 at 18:47

0 Answers0