testing-library/react-testing-library

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

MimoJSRepo opened this issue · 0 comments

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