完整的 redux 工具包（第-5部分）-js教程-PHP中文網

Complete redux toolkit (Part -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中文網其他相關文章！