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?