测试 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

目前您必须单独安装并导入React测试Hooks

对 Zustand 内部和特定组件状态更改进行单元测试的最佳方法不是使用 Zustand，而是通过

使用 Jest 模拟 store hook。

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

一旦进行了单元测试，那么您应该与集成测试一起测试真实钩子和组件的行为。