I have three files:

• use-user-info.ts
• user-info.tsx
• user-info.test.tsx

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:

• vi.mock
• vi.doMock
• mockReturnValue
• mockImplementation
• Add the mock implementation on vi.mock
• Add the mock implementantion after the vi.mock

I have the same error with similar hooks.