I have three files:
I want to test the behaviour of the component UserInfo (exported from user-info.tsx).
On my test file I mock the hook like this:
vi.mock("@/use-user-info");
describe(() => {
beforeEach(() => {
vi.mocked("@/use-user-info").mockReturnValue({
userId: 1,
username: "John Doe",
isLoading: false
})
return () => {vi.clearAllMock()}
})
})
The problem is that if I use the hook on the beforeEach scope, I got the mocked values, but if I put a console.log on user-info.tsx to know the value of the hook, I got "default values".
Reading the docs I think could be something related to mocking pitfalls, but cant see the problem.
My use-user-info implementation is something like this:
export const useUserInfo = (userId) => {
const { infoNotification } = useNotification();
const { updateUser } = useUpdateUser(updateBudgetData)
const userMessages = useUserMessages(userId);
return {
infoNotification,
updateUser,
userMessages
}
}
I tried to mock the hook on different forms:
I have the same error with similar hooks.
Trying things I discovered that the problem was that I mocked a module on the vitest.setup.ts
file. This module wasn't related with the hook I was trying to mock but commenting it, the problem solves. In this issue the user has the same problem as me and I solved it like in this comment, putting vi.resetModules();
at the bottom of vitest.setup.ts
file.