[Testing] Zustand testing and/or mocking process failed in React Native

[jimmynguyen1308]

Hi!

I am currently working on a React Native project that using Zustand (v4.3.8) for state management and using vitest for testing.

While I was trying to mock Zustand in accordance to this documentation, I encountered an error TypeError: create(...) is not a function.

At first I thought it might be some configuration conflicts with React Native and/or Vitest; however, the exact bug can be found in Zustand example on CodeSandbox

Screenshot:

It might be related to issue #1505, but I am new to Zustand so I can't be sure. For reference, my code for one store looks like this...

import { create, StateCreator } from "zustand"
import { persist, createJSONStorage } from "zustand/middleware"
import AsyncStorage from "@react-native-async-storage/async-storage"

export interface IMessageStore {
  message: string | null
  setMessage: (message: string | null) => void
}

export const messageState: StateCreator<IMessageStore> = (set) => ({
  message: null,
  setMessage: (message: string | null) => set({ message }),
})

export const useMessageStore = create<IMessageStore>()(
  persist(
    (set, get, api) => ({
      ... messageState(set, get, api),
    }),
    {
      name: "message-storage",
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
)

[dbritto-dev]

@jimmynguyen1308 thanks for pointing out that I'll take a look of that

[dbritto-dev]

@jimmynguyen1308 I updated the example

[jimmynguyen1308]

Thanks. I'll have a look.

[dbritto-dev]

@jimmynguyen1308 keep me in the loop

[jimmynguyen1308]

Found the issue on my end. Somehow my project isn't compatible with @testing-library/jest-dom, so I have to put the mock directly to the __mock__ path location:

// setup-vitest.ts
import { vi } from "vitest"
vi.mock("./src/__mock__/zustand")

Not too sure if it's the same case with the CodeSandbox, but thanks @dbritto-dev for your quick response. Cheers!

[dbritto-dev]

@jimmynguyen1308 you shouldn't do that please look into latest codesandbox demo. I updated the docs too. https://github.com/pmndrs/zustand/pull/1898/files