reactjstypescriptunit-testingvitevitest

VITEST Hook mocked on test dont return desired value


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.


Solution

  • Trying things I discovered that the problem was that I mocked a module on the vitest.setup.tsfile. 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.