zustand-jest-utils v0.1.0
zustand-jest-utils
zustand-jest-utils
is a set of utility functions designed to simplify testing custom stores in your React applications. The package is compatible with Zustand and provides functions for creating mock stores, replacing stores, rendering components with custom stores, and resetting stores.
Installation
Install the package using npm:
npm install zustand-jest-utils
Usage
First, import the utility functions from the package:
import {
createTestStore,
createMockStore,
replaceStore,
renderWithStore,
resetStore,
} from 'zustand-jest-utils';
Creating a Test Store
Use the createTestStore function to create a custom store with an initial state and custom actions:
const initialState = { count: 0 };
const customActions = (set) => ({
increment: () => set((state) => ({ count: state.count + 1 })),
});
const store = createTestStore(initialState, customActions);
Creating a Mock Store
Use the createMockStore function to create a mock store with an initial state, custom actions, and optional action overrides:
const initialState = { count: 0 };
const customActions = (set) => ({
increment: () => set((state) => ({ count: state.count + 1 })),
});
const overrides = { increment: () => {} };
const mockStore = createMockStore(initialState, customActions, overrides);
Replacing a Store
Use the replaceStore function to replace an old store with a new store:
const newStore = replaceStore(oldStore, mockStore);
Rendering a Component with a Custom Store
Use the renderWithStore function to render a component with a custom store. This function internally uses the React Testing Library's render method:
import { MyComponent } from './MyComponent';
const { getByText } = renderWithStore(<MyComponent />, store);
Resetting a Store
Use the resetStore function to reset a store to its initial state:
resetStore(store, initialState);
Example
Here's an example of how to use React Testing Store Utils in a test:
import {
createMockStore,
renderWithStore,
} from 'zustand-jest-utils';
import { fireEvent, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('MyComponent should update the count on button click', () => {
const initialState = { count: 0 };
const customActions = (set) => ({
increment: () => set((state) => ({ count: state.count + 1 })),
});
const store = createMockStore(initialState, customActions);
renderWithStore(<MyComponent />, store);
fireEvent.click(screen.getByText('Increment'));
expect(store.getState().count).toBe(1);
});
License
zustand-jest-utils
is released under the MIT License.
Contributing
Feel free to open issues or submit pull requests to help improve this package. Your contributions are always welcome!