完整的 redux 工具包（第-5部分）

這是第 5 部分：Redux 工具包和 RTK 查詢的測試策略的草稿。這部分將涵蓋測試 Redux Toolkit 和 RTK Query 的最佳實踐，重點是單元測試、整合測試，並確保您的程式碼健壯且可維護。

---

第 5 部分：Redux 工具包和 RTK 查詢的測試策略

1. Redux 應用程式測試的重要性

測試是任何應用程式開發過程的重要方面。它確保您的應用程式按預期運行，幫助及早發現錯誤，並在進行更改時提供信心。借助 Redux Toolkit (RTK) 和 RTK Query，由於其簡化的 API 和減少的樣板文件，測試變得更加容易管理。在這一部分中，我們將探索不同的測試策略，以確保 Redux 應用程式可靠且可維護。

2. 建置測試環境

在深入研究特定的測試策略之前，請確保您已設定適當的測試環境。對於典型的 React Redux Toolkit 項目，您可能會使用以下工具：

• Jest：流行的 JavaScript 測試框架。
• React 測試庫 (RTL)：用於測試 React 元件的輕量級解決方案。
• MSW (Mock Service Worker)：用於在測試期間模擬 API 請求的程式庫。

要安裝這些函式庫，請執行：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom msw

3. Redux 切片的單元測試

Redux 切片是 Redux Toolkit 中狀態管理的核心。對這些切片進行單元測試可確保減速器和操作正常運作。

第 1 步：測試減速器

考慮以下 postsSlice.js：

// src/features/posts/postsSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  posts: [],
  status: 'idle',
  error: null,
};

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    addPost: (state, action) => {
      state.posts.push(action.payload);
    },
    removePost: (state, action) => {
      state.posts = state.posts.filter(post => post.id !== action.payload);
    },
  },
});

export const { addPost, removePost } = postsSlice.actions;
export default postsSlice.reducer;

postsSlice Reducer 的單元檢定：

// src/features/posts/postsSlice.test.js
import postsReducer, { addPost, removePost } from './postsSlice';

describe('postsSlice reducer', () => {
  const initialState = { posts: [], status: 'idle', error: null };

  it('should handle initial state', () => {
    expect(postsReducer(undefined, {})).toEqual(initialState);
  });

  it('should handle addPost', () => {
    const newPost = { id: 1, title: 'New Post' };
    const expectedState = { ...initialState, posts: [newPost] };

    expect(postsReducer(initialState, addPost(newPost))).toEqual(expectedState);
  });

  it('should handle removePost', () => {
    const initialStateWithPosts = { ...initialState, posts: [{ id: 1, title: 'New Post' }] };
    const expectedState = { ...initialState, posts: [] };

    expect(postsReducer(initialStateWithPosts, removePost(1))).toEqual(expectedState);
  });
});

說明：

• 初始狀態測試：驗證reducer回傳正確的初始狀態。
• 操作測試：測試 addPost 和 removePost 操作以確保它們正確修改狀態。

4. 測試RTK查詢API切片

RTK 查詢簡化了 API 集成，但測試這些 API 切片與測試常規切片略有不同。您需要模擬 API 請求並驗證切片如何處理這些請求。

第 1 步：為模擬 API 請求設定 MSW

建立 setupTests.js 檔案來設定 MSW：

// src/setupTests.js
import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  // Mocking GET /posts endpoint
  rest.get('https://jsonplaceholder.typicode.com/posts', (req, res, ctx) => {
    return res(ctx.json([{ id: 1, title: 'Mock Post' }]));
  }),
  // Mocking POST /posts endpoint
  rest.post('https://jsonplaceholder.typicode.com/posts', (req, res, ctx) => {
    return res(ctx.json({ id: 2, ...req.body }));
  })
);

// Establish API mocking before all tests
beforeAll(() => server.listen());
// Reset any request handlers that are declared as a part of our tests (i.e. for testing one-time errors)
afterEach(() => server.resetHandlers());
// Clean up after the tests are finished
afterAll(() => server.close());

步驟 2：為 RTK 查詢端點撰寫測試

從 postsApi.js 測試 fetchPosts 查詢：

// src/features/posts/postsApi.test.js
import { renderHook } from '@testing-library/react-hooks';
import { Provider } from 'react-redux';
import { setupApiStore } from '../../testUtils';
import { postsApi, useFetchPostsQuery } from './postsApi';
import store from '../../app/store';

describe('RTK Query: postsApi', () => {
  it('fetches posts successfully', async () => {
    const { result, waitForNextUpdate } = renderHook(() => useFetchPostsQuery(), {
      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
    });

    await waitForNextUpdate();

    expect(result.current.data).toEqual([{ id: 1, title: 'Mock Post' }]);
    expect(result.current.isLoading).toBeFalsy();
  });
});

說明：

• MSW 設定：setupServer 設定 MSW 來模擬 API 端點。
• Render Hook：React 測試庫中的 renderHook 實用程式用於測試自訂鉤子，例如 useFetchPostsQuery。
• 模擬 API 回應：使用模擬 API 回應驗證掛鉤的行為。

5. Redux 與組件的整合測試

整合測試著重於測試不同部分如何協同工作。在 Redux 應用程式中，這通常意味著測試與 Redux 儲存互動的元件。

第 1 步：使用 React 測試庫編寫整合測試

PostsList元件的整合測試：

// src/features/posts/PostsList.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../../app/store';
import PostsList from './PostsList';

test('renders posts fetched from the API', async () => {
  render(
    <Provider store={store}>
      <PostsList />
    </Provider>
  );

  expect(screen.getByText(/Loading.../i)).toBeInTheDocument();

  // Wait for posts to be fetched and rendered
  await waitFor(() => {
    expect(screen.getByText(/Mock Post/i)).toBeInTheDocument();
  });
});

說明：

• 載入狀態測試：檢查載入指示器是否最初顯示。
• 資料渲染測試：等待取得貼文並確保它們正確渲染。

6. 測試 Redux Toolkit 和 RTK 查詢的最佳實踐

• 使用 MSW 進行 API 模擬：MSW 是一個強大的工具，用於模擬網路請求並模擬不同的場景，例如網路錯誤或回應緩慢。
• 隔離測試Reducers：Reducer 測試是純函數，應該單獨測試以確保它們正確處理操作。
• 隔離測試 Hooks：使用 React 測試庫中的 renderHook 獨立於 UI 元件測試 hooks。
• 使用 setupApiStore 進行 API 切片測試：測試 RTK 查詢端點時，使用 setupApiStore 透過 API 切片模擬 Redux 儲存。
• 專注於組件的整合測試：結合切片和組件測試進行整合測試，以確保它們正確地協同工作。
• 確保邊緣情況的覆蓋：測試邊緣情況，例如 API 錯誤、空狀態和無效數據，以確保穩健性。

七、結論

在這一部分中，我們介紹了 Redux Toolkit 和 RTK Query 的各種測試策略，包括單元測試減速器和切片、使用 MSW 測試 RTK Query API 切片以及為與 Redux 存儲交互的組件編寫集成測試。透過遵循這些最佳實踐，您可以確保您的 Redux 應用程式健壯、可靠且可維護。

我們的 Redux Toolkit 和 RTK 查詢系列到此結束！我希望這些部分能幫助您從基礎到進階主題理解 Redux Toolkit，包括有效的測試策略。

快樂編碼，並不斷測試以確保您的應用程式始終處於最佳狀態！

以上是完整的 redux 工具包（第-5部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！