How to Mock zustand store for jest test

In unit testing, mocking is a common practice, especially when handling external dependencies or complex state management. When using Jest to test React components or other JavaScript modules that utilize Zustand, we typically aim to isolate these tests to avoid dependency on the actual store state. Next, I will provide a detailed explanation of how to mock Zustand's store using Jest.

1. Creating a Mock Store

First, we need to create a mock implementation of the store. This mock should mimic the interface of the real store without implementing all functionalities.

Assume we have a Zustand store as follows:

javascript
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}));

export default useStore;

For testing, we can create a mock version:

javascript
// mockStore.js
export const useMockStore = () => ({
  count: 0,
  increase: jest.fn(),
  decrease: jest.fn()
});

2. Using the Mock Store in Jest Tests

Next, in our test file, we need to instruct Jest to use this mock store instead of the real store. We can achieve this using the jest.mock() method:

javascript
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ComponentUnderTest from './ComponentUnderTest';
import * as storeFile from './store';  // Importing the real store

jest.mock('./store', () => ({
  __esModule: true,
  default: jest.requireActual('./mockStore').useMockStore  // Using mock store instead
}));

describe('ComponentUnderTest', () => {
  it('should display count', () => {
    const { getByText } = render(<ComponentUnderTest />);
    expect(getByText('Count: 0')).toBeTruthy();
  });

  it('should increase count on button click', () => {
    const { getByText } = render(<ComponentUnderTest />);
    const increaseButton = getByText('Increase');
    fireEvent.click(increaseButton);
    expect(storeFile.default().increase).toHaveBeenCalled();  // Checking if mock function was called
  });
});

3. Explanation and Notes

In the above test example, we replace the entire store module using jest.mock(), simulating the store with an object that returns mock functions (e.g., increase and decrease). During testing, we can verify that these mock functions are called correctly to validate component behavior.

It is important to note that after each test, use jest.clearAllMocks() or jest.resetAllMocks() to reset the mock states, ensuring test independence.

Summary

Mocking Zustand's store enables us to test components and modules in an isolated environment without concern for the specific implementation or current state of the store. This ensures that our tests are controlled and consistent, thereby enhancing test quality and reliability.