在 Jest 中测试由组件引起的 zustand 状态更改

如何解决在 Jest 中测试由组件引起的 zustand 状态更改

我对使用 jest 还很陌生，我正在尝试测试一个组件，该组件会根据我的全局状态（使用 Zustand）进行状态更改。基本上我单击一个按钮并将其添加到我的 state.traits 中。这是我的组件代码：

import { Flex,usetoast } from '@chakra-ui/react'
import { FC } from 'react'
import { useProfileStore } from 'stores/profileStore'

interface DataTrait {
    name: string,id: string
}

type Props = {
    trait: DataTrait
}

export const ChipItem: FC<Props> = ({ trait }) => {
    const { traits,setTraits } = useProfileStore()
    const toast = usetoast()
    const traitNames = traits.map((trait) => trait.name)
    const emptyTraits = traits.filter((trait) => trait.name === "")

    const handleClick = (trait: DataTrait) => {
        if (!traitNames.includes(trait.name) && emptyTraits.length !== 0) {
            let currentItem = traits.filter(trait => trait.name === "")[0]
            let items = [...traits]
            let item = {position: currentItem.position,id: trait.id,name: trait.name}
            items[items.indexOf(currentItem)] = item
            setTraits(items)
        
        } else if (emptyTraits.length === 0){
            toast({
                title: 'Error',status: 'error',description: 'Only 5 traits can be selected',isClosable: true,duration: 5000
            })
        } else {
            toast({
                title: 'Error',description: 'Please select unique traits',duration: 5000
            })
        }
    }

    return (
        traitNames.includes(trait.name) ? (
            <Flex mx={4} p={2} cursor="pointer" borderRadius="20px" backgroundColor="green" borderWidth="1px" borderColor="white" textColor="white" onClick={() => handleClick(trait)}>{trait.name}</Flex>
        ) : (
            <Flex mx={4} p={2} cursor="pointer" borderRadius="20px" borderWidth="1px" borderColor="grey" onClick={() => handleClick(trait)}>{trait.name}</Flex>
        )
    )
}

这是我的商店代码：

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",{position: "2",{position: "3",{position: "4",]

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 })
}))

这是我的测试代码：

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()
    })
})

发生了什么，它一直告诉我 renderHook 不是一个函数，并且特征总是返回未定义。任何帮助将不胜感激！