Update README and add slice mocking examples

Author: emseidov

README.md

@@ -3,31 +3,39 @@
   <p>A <a href="https://react.dev/">React</a> hook for working with <a href="https://redux-toolkit.js.org/">Redux Toolkit</a> slices, with zero setup and boilerplate ⚛️ 🛠️
   </p>
   <p>
-    <a href="https://www.npmjs.com/package/use-rtk-slice"><img alt="npm" src="https://img.shields.io/npm/v/use-rtk-slice.svg"></a>
-    <a href="https://www.npmjs.com/package/use-rtk-slice" target="_blank"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/use-rtk-slice.svg" /></a>
-    <a href="https://github.com/Lambdaphile/use-rtk-slice/blob/main/src/useSlice.test.tsx"><img alt="Coverage" src="https://img.shields.io/badge/coverage-100%25-brightgreen"></a>
-    <a href="https://www.typescriptlang.org/"><img alt="TypeScript Ready" src="https://img.shields.io/badge/TypeScript-Ready-blue.svg"></a>
+    <a href="https://www.npmjs.com/package/use-rtk-slice" target="_blank"><img alt="npm" src="https://img.shields.io/npm/v/use-rtk-slice.svg?label=NPM"></a>
+    <a href="https://www.npmjs.com/package/use-rtk-slice" target="_blank"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/use-rtk-slice.svg?label=Downloads" /></a>
+    <a href="https://github.com/Lambdaphile/use-rtk-slice/blob/main/src/useSlice.test.tsx" target="_blank"><img alt="Coverage" src="https://img.shields.io/badge/Coverage-100%25-brightgreen"></a>
+    <a href="https://www.typescriptlang.org/" target="_blank"><img alt="TypeScript Ready" src="https://img.shields.io/badge/TypeScript-Ready-blue.svg"></a>
   </p>
   <pre>npm i <a href="https://www.npmjs.com/package/use-rtk-slice">use-rtk-slice</a></pre>
 </div>
 <hr/>
 
-Using Redux Toolkit slices with plain `useSelector` and `useDispatch` hooks requires:
+Using Redux Toolkit slices with plain `useSelector` and `useDispatch` hooks often requires:
 
-1. Manually defining typed versions of `useSelector` and `useDispatch` in TypeScript projects - [Define `useAppSelector` and `useAppDispatch`](https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks).
+1. Manually defining typed versions of `useSelector` and `useDispatch` in TypeScript projects: [Define `useAppSelector` and `useAppDispatch`](https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks).
 2. Repeatedly writing `const dispatch = useDispatch()` just to dispatch an action.
 3. Slice selectors are not bound - using them requires passing the relevant slice state, e.g., `selector({ stateName: state })`.
 
 The `useSlice` hook from `use-rtk-slice` handles all of this: it binds actions and selectors internally, and returns fully typed, ready-to-use slice state, actions, and selectors.
 
+## Contents
+
+- [Usage](#usage)
+- [Testing (Mocking Slices)](#testing-mocking-slices)
+  - [Mock State](#mock-state)
+  - [Mock Selectors](#mock-selectors)
+  - [Mock and Spy on Actions](#mock-and-spy-on-actions)
+
 ## Usage
 
 Define a RTK slice:
 
 `todosSlice.ts`
 
 ```ts
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 
 interface Todo {
   id: number
@@ -38,12 +46,12 @@ interface Todo {
 const initialState: Todo[] = [
   {
     id: Date.now(),
-    name: 'Feed the cat 🐱',
+    name: '🧪 Write unit tests',
     done: false
   }
 ]
 
-export const todosSlice = createSlice({
+const todosSlice = createSlice({
   name: 'todos',
   initialState: initialState,
   reducers: {
@@ -54,19 +62,24 @@ export const todosSlice = createSlice({
       return state.map((todo) =>
         todo.id === action.payload ? { ...todo, done: !todo.done } : todo
       )
+    },
+    removeTodo(state, action: PayloadAction<Todo['id']>) {
+      return state.filter((todo) => todo.id !== action.payload)
     }
   },
   selectors: {
-    selectCompleted: (state) => state.filter((todo) => todo.done)
+    selectCompleted(state) {
+      return state.filter((todo) => todo.done)
+    }
   }
 })
 ```
 
-Destructure the `state`, and the bound `actions` and `selectors` from the slice as needed using, the `useSlice` hook:
+Destructure the `state`, and the bound `actions` and `selectors` from the slice as needed, using the `useSlice` hook:
 
 `TodoList.tsx`
 
-```tsx
+```ts
 import useSlice from 'use-rtk-slice'
 import { todosSlice } from './todosSlice'
 
@@ -84,15 +97,93 @@ function TodoList() {
                 checked={done}
                 onChange={() => actions.toggleTodo(id)}
               />
-              {name}
+              {done ? <s>{name}</s> : name}
             </label>
+            <button onClick={() => actions.removeTodo(id)}>🗑️</button>
           </li>
         ))}
       </ul>
-      <p>
-        <strong>Completed Todos:</strong> {selectors.selectCompleted().length}
-      </p>
+      <p>Completed todo count: {selectors.selectCompleted().length}</p>
     </div>
   )
 }
 ```
+
+## Testing (Mocking Slices)
+
+To mock slices, use the `mockSlice` utility from `use-rtk-slice/test/vitest` or `use-rtk-slice/test/jest`:
+
+### Mock State
+
+```ts
+import { mockSlice } from 'use-rtk-slice/test/vitest'
+// or
+import { mockSlice } from 'use-rtk-slice/test/jest'
+
+import { App } from './App'
+import { todoSlice } from './todoSlice'
+
+describe('TodoList', () => {
+  beforeEach(() => {
+    mockSlice.beforeEach()
+  })
+
+  it('should render todos', () => {
+    mockSlice(todosSlice, {
+      state: [
+        { id: 0, name: '🧪 Write unit tests', done: false },
+        { id: 1, name: '📝 Update README', done: false }
+      ]
+    })
+
+    render(<App />)
+
+    const todos = screen.getAllByRole('listitem')
+    expect(todos).toHaveLength(2)
+  })
+})
+```
+
+### Mock Selectors
+
+```ts
+describe('TodoList', () => {
+  beforeEach(() => {
+    mockSlice.beforeEach()
+  })
+
+  it('should render completed todo count', () => {
+    mockSlice(todosSlice, {
+      selectCompleted: () => [{ id: 0, name: '🧪 Write unit tests', done: true }]
+    })
+
+    render(<App />)
+
+    expect(screen.getByText('Completed todo count: 1')).toBeInTheDocument()
+  })
+})
+```
+
+### Mock and Spy on Actions
+
+```ts
+describe('TodoList', () => {
+  beforeEach(() => {
+    mockSlice.beforeEach()
+  })
+
+  it('should toggle todos', () => {
+    const { toggleTodo } = mockSlice(todosSlice, {
+      state: [{ id: 0, name: '🧪 Write unit tests', done: false }]
+    })
+
+    render(<App />)
+
+    const todoToggle = screen.getByRole('checkbox')
+    fireEvent.click(todoToggle)
+    expect(toggleTodo).toHaveBeenCalled()
+  })
+})
+```
+
+**Note:** Calling `beforeEach(() => { mockSlice.beforeEach() })` is required to ensure test cases run in isolation.