Berikut ialah draf untuk Bahagian 5: Strategi Pengujian untuk Redux Toolkit dan Pertanyaan RTK. Bahagian ini akan merangkumi amalan terbaik untuk menguji Redux Toolkit dan RTK Query, memfokuskan pada ujian unit, ujian integrasi dan memastikan kod anda teguh dan boleh diselenggara.
Pengujian ialah aspek penting dalam mana-mana proses pembangunan aplikasi. Ia memastikan aplikasi anda berkelakuan seperti yang diharapkan, membantu menangkap pepijat lebih awal dan memberikan keyakinan apabila membuat perubahan. Dengan Redux Toolkit (RTK) dan RTK Query, ujian menjadi lebih terurus kerana API dipermudahkan dan pelat dandang yang dikurangkan. Dalam bahagian ini, kami akan meneroka strategi ujian yang berbeza untuk memastikan aplikasi Redux boleh dipercayai dan boleh diselenggara.
Sebelum menyelami strategi ujian tertentu, pastikan anda menyediakan persekitaran ujian yang betul. Untuk projek React + Redux Toolkit biasa, anda mungkin menggunakan alatan seperti:
Untuk memasang perpustakaan ini, jalankan:
npm install --save-dev jest @testing-library/react @testing-library/jest-dom msw
Kepingan Redux ialah teras pengurusan keadaan dalam Redux Toolkit. Unit menguji kepingan ini memastikan pengurang dan tindakan berfungsi dengan betul.
Pertimbangkan siaranSlice.js berikut:
// 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;
Ujian Unit untuk 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);
});
});
Penjelasan:
Pertanyaan RTK memudahkan penyepaduan API, tetapi menguji kepingan API ini berbeza sedikit daripada menguji kepingan biasa. Anda perlu mengejek permintaan API dan mengesahkan cara kepingan mengendalikan permintaan tersebut.
Buat fail setupTests.js untuk mengkonfigurasi 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());
Menguji pertanyaan fetchPosts daripada postsApi.js:
// 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();
});
});
Penjelasan:
Ujian integrasi memfokuskan pada menguji cara bahagian yang berbeza berfungsi bersama. Dalam aplikasi Redux, ini selalunya bermaksud menguji komponen yang berinteraksi dengan kedai Redux.
Ujian integrasi untuk komponen 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();
});
});
Penjelasan:
在这一部分中，我们介绍了 Redux Toolkit 和 RTK Query 的各种测试策略，包括单元测试减速器和切片、使用 MSW 测试 RTK Query API 切片以及为与 Redux 存储交互的组件编写集成测试。通过遵循这些最佳实践，您可以确保您的 Redux 应用程序健壮、可靠且可维护。
我们的 Redux Toolkit 和 RTK 查询系列就到此结束！我希望这些部分能够帮助您从基础到高级主题理解 Redux Toolkit，包括有效的测试策略。
快乐编码，并不断测试以确保您的应用程序始终处于最佳状态！
以上是完整的 redux 工具包（第-5部分）的详细内容。更多信息请关注PHP中文网其他相关文章！
