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

Question

我对使用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',
                status: 'error',
                description: 'Please select unique traits',
                isClosable: true,
                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", 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 })
}))

下面是我的测试代码：

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不是一个函数，特征总是返回时未定义。任何帮助都将不胜感激！

Answer 1

目前，您必须单独使用install and import React Testing Hooks

在内部和特定组件中单元测试Zustand状态变化的最好方法不是使用Zustand，而是使用带有Jest的mocking the store hook。

您应该使用React Hook测试库为Zustand创建一个测试用例，一旦您验证了钩子的行为符合预期，那么您就可以使用手动特征和setTraits更改来模拟商店。

一旦你有了单元测试，你就应该在集成测试的同时测试真正的钩子和组件的行为。