Zustand@4 Jest React Testing

[fungw]

I would like some help, as well as understanding testing a React Application in Typescript using Zustand with Jest.

I've been trying to follow discussions either on this repo, SO, as well as the Zustand documentation, but I'm failing to get past a certain point.

The root issue I'm running into is: TypeError: store_1.default.getState is not a function in addition to TypeError: store_1.default.setState is not a function. I feel like I'm either misunderstanding how to achieve mocking a Zustand store, or perhaps referencing the wrong Store instance.

My test is simply:

import useStore from '../src/store';

describe('test store', () => {
  const initialStoreState = useStore.getState();
     
  beforeEach(() => {
    useStore.setState(initialStoreState, true);
  });

  test('renders HomePage', () => {
    render(<Router><HomePage/></Router>);
    useStore.setState({ countries: [] });

    const countriesList = screen.getByText('Countries List');
    expect(countriesList).toBeInTheDocument();
  });
});

where ../src/store is my Apps store; which I think is what many have suggested in how to use it in a Jest test.

My store is created like this:

import create from 'zustand';

const useStore = create<IStore>((set, get) => ({
   countries: [],
   fetchCountries: async () => { ... },
   ...
}));

export default useStore;

where IStore is just a custom TS interface.

As I've also read, I've placed a zustand.ts in my root directories' __mocks__ folder, and it looks like this:

import { StateCreator } from "zustand";
import { act } from "@testing-library/react";
const actualCreate = jest.requireActual('zustand');

// a variable to hold reset functions for all stores declared in the app
const storeResetFns = new Set<() => void>();

// when creating a store, we get its initial state, create a reset function and add it in the set
const create = () => <S,>(createState: StateCreator<S>) => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => {
    store.setState(initialState, true);
  });
  return store;
}

// Reset all stores after each test run
beforeEach(async () => {
  await act(() =>
    storeResetFns.forEach((resetFn: any) => {
      resetFn();
    })
  )
})

export default create

I do notice here that it does execute __mocks__/zustand.ts, with the calls to getState() and setState() valid. A question I have here is how does one utilise this mocked zustand store? Do I make a reference to my Apps' store from this mocked store or should I be using this mocked store from the Jest test?

The versions that I have are:

{
        "jest": "^29.3.1",
        "react": "^18.2.0",
        "typescript": "^4.9.3",
        "zustand": "^4.1.4"
}

Any ideas or helping me understand this a bit more would be greatly appreciated, thank you in advance.

[dai-shi]

The default export is deprecated. Can you try the latest version and use named exports for everything?

[fungw]

@dai-shi I have updated my Zustand to 4.3.2. Of the two places I import Zustand, I have import { StateCreator } from "zustand" in my __mocks__/zustand and import { create } from "zustand" in my src/store.ts now.

The error now is TypeError: (0 , zustand_1.create) is not a function in my src/store.ts when running Jest specifically. However, I noticed when I execute the store for my local dev environment with pnpm dev (which uses webpack for compilation), the store executes fine, with no errors. So I took a look at my jest config:
jest.config.ts:

import type {Config} from 'jest';

const config: Config = {
  automock: false,
  setupFilesAfterEnv: ["<rootDir>/configs/jest/jest.setup.ts"],
  testEnvironment: 'jsdom',
  ...
};

export default config;

jest.setup.ts

import '@testing-library/jest-dom';
jest.mock('zustand');

I set automock to false, and added jest.mock('zustand') as suggested in the Zustand documentation. But this setup still gives me the TypeError: (0 , zustand_1.create) is not a function when running Jest. Is there something else I need to do so that Zustand is exposed to Jest environment?

I have tried removing node_modules, and reinstalling my packages, but the error still persists.

The way I'm initialising the store is as before:

const useStore = create((set, get) => ({
  countries: [],
  fetchCountries: async() => { ... },
  ...
}));

[dai-shi]

TypeError: (0 , zustand_1.create) is not a function

I have no idea how it complains so. Hope someone can help here.

[jhensley]

Pretty straightforward fix for us was to change our zustand.ts in __mocks__ to export like this:

import { act } from "react-dom/test-utils";
import { create as actualCreate } from 'zustand'

// a variable to hold reset functions for all stores declared in the app
const storeResetFns = new Set();
// @ts-ignore
const extension = {
  subscribe: jest.fn(() => {
    return () => {};
  }),
  unsubscribe: jest.fn(),
  send: jest.fn(),
  init: jest.fn(),
  error: jest.fn(),
};
const extensionConnector = { connect: jest.fn(() => extension) };
(window as any).__REDUX_DEVTOOLS_EXTENSION__ = extensionConnector;

// when creating a store, we get its initial state, create a reset function and add it in the set
const create = (createState: any) => {
  const store = actualCreate<any>(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

// Reset all stores after each test run
afterEach(() => {
  act(() => storeResetFns.forEach((resetFn: any) => resetFn()));
});

export { create };

[dai-shi]

Oh, that's correct. I overlooked it. Thanks.

The fix:

- export default create
+ export { create }

[fungw]

Thank you both for the responses

For those stumbling upon this, or to simply share knowledge with you all, I found an alternative solution that was successful with the use of a facade pattern.

It involves adding a middle layer between the app and Zustand store. So that we can mock the facade store with Jest easier.

I will mark this discussion as answered, as I believe we have concluded