looking for some help testing react components that make changes to zustand store

[Tshamp7]

Hey! Im really enjoying using Zustand! so great! Im currently trying to test a button component with Jest that makes a modification to my zustand story and was wondering if anyone could help me out as im having a hard time getting it working?

// profileStore.ts
import create from 'zustand'

export interface Trait {
    position: string,
    name: string,
    id: string,
}

export type Traits = Trait[]

const initialTraits = [
    {position: "0", name: "", id: ""},
    {position: "1", name: "", id: ""},
    {position: "2", name: "", id: ""},
    {position: "3", name: "", id: ""},
    {position: "4", name: "", id: ""},
]

export type ProfileStore = {
    traits: Traits;
    setTraits: (traits: Traits) => void;
    clearTraits: () => void;
}

export const useProfileStore = create<ProfileStore>((set) => ({
    traits: initialTraits,
    setTraits: (traits) => set({ traits }),
    clearTraits: () => set({ traits: initialTraits })
}))

and my test file for my component is this:

import React from 'react';
import { ChipItem } from "../../ChipList/ChipItem";
import { act, render, renderHook } from "@testing-library/react";
import { useProfileStore } from "../../../stores/profileStore";

const stubbedTrait = {
    name: "Doing Work",
    id: "efepofkwpeok"
}

it("displays the trait chip", () => {
    const { queryByText } = render(<ChipItem trait={stubbedTrait} />);
    expect(queryByText("Doing Work")).toBeTruthy();
})

it("sets the chip information in the store", () => {
    act(() =>  {
        const { traits } = renderHook(() => useProfileStore())
        const { getByText } = render(<ChipItem trait={stubbedTrait}/>);
        getByText(stubbedTrait.name).click()
        expect(traits.includes(stubbedTrait)).toBeTruthy()
    })
})

traits from useProfileStore always comes back as undefined, how do i go about this?

any help is really appreciated! thanks guys!

[dai-shi]

Please see tests/basic.test.tsx in the repo. It doesn't use renderHook but just render. Hope it helps.