Skip to content

How test react component reaction to mocked Zustand store using Vitest and React Testing Library? #1381

Closed
@MimoJSRepo

Description

@MimoJSRepo

Hello

I searched a lot for a solution for this scenario but I did not find .

I have a Zustand store created, for example let me use a pseudo example:

const useEmployeeData = createStore()((set) => ({
age: 42,
married: false,
setAge: (nextAge) =>
set((state) => ({
age: typeof nextAge === 'function' ? nextAge(state.age) : nextAge,
})),
}))


Another React component is using this useEmployeeData hook to display some data, for example:

Employee.tsx

const married = useEmployeeData((state) => state.married);

so this card will only be displayed when the value is true.


As I mentioned, I could not find anyway how to test this case . I want to test this component with Vitest, but I can not find a way how to mock the implementation of the store inside the React component (Employee.jsx). So is there a way how to make this component use different mocked values from the store so I can test the rendering of some parts in the DOM

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions