How can I test the store hook?

[Darksoulsong]

Basically, I'm trying to to do the following:

• To be able to mount the store
• To call a method
• To check if the state has been updated correctly.

So I came up with the following code:

// The test

import actualCreate, { GetState, SetState } from "zustand";
import {
  act,
  Renderer,
  renderHook,
  RenderHookResult,
} from "@testing-library/react-hooks";

import { groceryStore } from ".";
import { GroceryListStoreMethods, GroceryListStoreProperties } from "../types";

type GroceryListStore = GroceryListStoreProperties & GroceryListStoreMethods;

type ResetFunction = () => void;

type CreateState = (
  set: SetState<GroceryListStore>,
  get: GetState<GroceryListStore>,
  api: any
) => GroceryListStore;

const storeResetFns = new Set<ResetFunction>();

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

let store: RenderHookResult<
  unknown,
  GroceryListStore,
  Renderer<unknown>
> | null;

beforeEach(() => {
  const useGroceryListStore = create(groceryStore);
  store = renderHook(() => useGroceryListStore());
});

test("Should return true to a isEmpty() check", () => {
  act(() => {
    const result = store?.result.current.isEmpty();
    expect(result).toBe(true);
  });
});

test("Should add a grocery item to the list", (resolve) => {
  act(() => {
    const theStore = store?.result.current;
    theStore?.addGrocery("Bananas", 3);

    store?.waitForValueToChange(() => {
      try {
        expect(theStore?.groceries.length).toBe(1);
        resolve();
      } catch (e) {
        resolve(e);
      }
    });
  });
});

afterEach(() => {
  act(() => storeResetFns.forEach((resetFn) => resetFn()));
  store = null;
});

// The Store

import { combine } from "zustand/middleware";
import { createId } from "@/services/utils";

import { GroceryListStoreProperties, GroceryListStoreMethods } from "../types";

const groceryStore = combine<
  GroceryListStoreProperties,
  GroceryListStoreMethods
>(
  {
    groceries: {},
    selectedGroceries: [],
    lastAddedGrocery: "",
  },
  (set, get) => ({
    addGrocery(name, amount = 1) {
      const id = createId();

      set((state) => {
        return {
          groceries: {
            ...state.groceries,
            ...{ [id]: { id, name, amount } },
          },
        };
      });
    },

    removeGroceries(ids) {
      set((state) => {
        state.selectedGroceries = [];

        if (!ids) {
          state.groceries = {};
        } else {
          ids.forEach((groceryId) => {
            delete state.groceries[groceryId];
          });
        }

        return {
          selectedGroceries: [],
          groceries: state.groceries,
        };
      });
    },

    updateGrocery(id, props) {
      set((state) => {
        state.groceries[id] = {
          ...state.groceries[id],
          ...props,
        };
        return { ...state };
      });
    },

    getTotalAmount() {
      return Object.values(get().groceries).reduce(
        (acc, curr) => acc + curr.amount,
        0
      );
    },

    getGroceriesList() {
      return Object.values(get().groceries);
    },

    setSelectedGroceries({ checked, id }) {
      set((state) => {
        state.selectedGroceries = checked
          ? [...state.selectedGroceries, id]
          : state.selectedGroceries.filter((value) => value != id);

        return { ...state };
      });
    },

    isEmpty() {
      return Object.keys(get().groceries).length === 0;
    },
  })
);

export default groceryStore;
export { groceryStore };

The second test ("Should add a grocery item to the list") result is always "0".
Any help would be great!

[dai-shi]

Maybe because you don't renderHook after adding a grocery?

[Darksoulsong]

@dai-shi sorry, It was a stupid mistake from my end.

Just had to tweak a little and run addGrocery() at the act() callback

test("Should add a grocery item to the list", () => {
  const theStore = store?.result.current;

  act(() => {
    theStore?.addGrocery("Bananas", 3);
  });

  expect(Object.keys(store?.result.current.groceries || {}).length).toBe(1);
});

Thanks for your help!