Zustand testing throws an error "TypeError: store.getState is not a function"

[Boniqx]

In the documentation it states that adding this in JEST would enable testing for ZUSTAND state.

const create = createState => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

But it seems to throw an error "TypeError: store.getState is not a function"

I am using typescript not sure if this causes some issues. Also, it is not well documented on how to use this test in jest. Just want to have values on my states so that they can be used on my componentes during rendering of test components.

[dai-shi]

Is it possible to reproduce it with codesandbox?

Hope someone can help this. Also, there are some open issues for testing that needs help.

[Boniqx]

Sorry Not really familiar how to create components and jest test in sandbox that is why I can't reproduce it. It looks like a typescript issue. Similar issues has been submitted in zustand. https://stackoverflow.com/questions/68896812/using-a-zustand-function-mock-with-jest-results-in-typeerror-create-is-not-a

[dai-shi]

The SO one's error is TypeError: create is not a function. It's a different one.

TypeError: store.getState is not a function seems a JS error, not TS.

[Boniqx]

Ohh nevermind I got it:

To do this you should use the actual store of your app

    const initialStoreState = useStore.getState()
     
     beforeEach(() => {
        useStore.setState(initialStoreState, true)
      })

    useStore.setState({ me: memberMockData, isAdmin: true })

[dai-shi]

Can close now??

[grigoll]

I came across the same issue. I am using TypeScript and followed the setup guide.

Turns out the error is caused by currying the create function:
The difference when using TypeScript is that instead of writing create(...), you have to write create<T>()(...)

Hence, when mocking the create you need to make it a curried as well so that it matches your usage.

               👇
const create = () => <S>(createState: StateCreator<S>) => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

@dai-shi it would be great to update the test guide. I've been banging my head for hours before I discovered the cause.

[dai-shi]

Can you open a PR?
Someone should be able to review.
cc: @dbritto-dev @sewera @chrisk-7777

[dbritto-dev]

@dai-shi sure I can take care of that

[FancyVase]

Just a heads up, the currying fix on the mock create works for a "standard" create call, but errors if you're using the immer middleware with the same "TypeError: store.getState is not a function".

A little hacky, but to support both types of create calls, I added a wrapper that returns another function if no state is passed in (similar to what Zustand does internally):

export const create = <S>(createState: StateCreator<S>) => {
  return typeof createState === 'function'
      ? createInternalFn(createState)
      : createInternalFn;
};

const createInternalFn = <S>(createState: StateCreator<S>) => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

[dbritto-dev]

@grigoll @FancyVase @dai-shi here's the PR #1739

[cam-shaw]

@FancyVase that solutions works great when using the example here
https://github.com/pmndrs/zustand/blob/3584d5075af278b674693193acde1aa03a7cd53b/docs/guides/how-to-reset-state.md

Appreciate it 🙏

[shahbazshueb]

Just a heads up, the currying fix on the mock create works for a "standard" create call, but errors if you're using the immer middleware with the same "TypeError: store.getState is not a function".

A little hacky, but to support both types of create calls, I added a wrapper that returns another function if no state is passed in (similar to what Zustand does internally):

export const create = <S>(createState: StateCreator<S>) => {
  return typeof createState === 'function'
      ? createInternalFn(createState)
      : createInternalFn;
};

const createInternalFn = <S>(createState: StateCreator<S>) => {
  const store = actualCreate(createState);
  const initialState = store.getState();
  storeResetFns.add(() => store.setState(initialState, true));
  return store;
};

Thanks @FancyVase Your solutions worked like a charm. I had been hitting my head for a long time as one of my tests were not passing.