완전한 redux 툴킷(파트 -5)-JS 튜토리얼-php.cn

Complete redux toolkit (Part -5)

다음은 파트 5: Redux 툴킷 및 RTK 쿼리에 대한 테스트 전략의 초안입니다. 이 부분에서는 단위 테스트, 통합 테스트에 중점을 두고 코드가 강력하고 유지 관리 가능하도록 보장하는 Redux Toolkit 및 RTK 쿼리 테스트의 모범 사례를 다룹니다.

5부: Redux 툴킷 및 RTK 쿼리에 대한 테스트 전략

1. Redux 애플리케이션에서 테스트의 중요성

테스트는 모든 애플리케이션 개발 프로세스에서 중요한 측면입니다. 이는 애플리케이션이 예상대로 작동하도록 보장하고 버그를 조기에 포착하는 데 도움이 되며 변경 시 자신감을 제공합니다. RTK(Redux Toolkit) 및 RTK 쿼리를 사용하면 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단계: 리듀서 테스트

다음 게시물Slice.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;

로그인 후 복사

게시물에 대한 단위 테스트Slice 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);
  });
});

로그인 후 복사

설명:

초기 상태 테스트: 리듀서가 올바른 초기 상태를 반환하는지 검증합니다.
액션 테스트: addPost 및 RemovePost 액션을 테스트하여 상태가 올바르게 수정되었는지 확인합니다.

4. RTK 쿼리 API 슬라이스 테스트

RTK 쿼리는 API 통합을 단순화하지만 이러한 API 슬라이스를 테스트하는 것은 일반 슬라이스를 테스트하는 것과 약간 다릅니다. API 요청을 모의하고 슬라이스가 해당 요청을 처리하는 방법을 검증해야 합니다.

1단계: 모의 API 요청을 위한 MSW 설정

MSW를 구성하려면 setupTests.js 파일을 만드세요.

// 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 쿼리 엔드포인트에 대한 테스트 작성

postApi.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는 API 엔드포인트를 모의하도록 MSW를 구성합니다.
렌더 후크: 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 툴킷 및 RTK 쿼리 테스트 모범 사례

API 모의에 MSW 사용: MSW는 네트워크 요청을 모의하고 네트워크 오류나 느린 응답과 같은 다양한 시나리오를 시뮬레이션하는 강력한 도구입니다.
리듀서 격리 테스트: 리듀서 테스트는 순수 기능이므로 작업을 올바르게 처리하는지 확인하기 위해 별도로 테스트해야 합니다.
격리된 후크 테스트: React 테스트 라이브러리의 renderHook를 사용하여 UI 구성 요소와 독립적으로 후크를 테스트합니다.
API 슬라이스 테스트에 setupApiStore 사용: RTK 쿼리 엔드포인트를 테스트할 때 setupApiStore를 사용하여 API 슬라이스로 Redux 저장소를 모의합니다.
구성 요소 통합 테스트에 집중: 통합 테스트를 위해 슬라이스 및 구성 요소 테스트를 결합하여 함께 올바르게 작동하는지 확인하세요.
특정 케이스에 대한 적용 범위 보장: 견고성을 보장하기 위해 API 오류, 빈 상태, 유효하지 않은 데이터 등의 엣지 케이스를 테스트하세요.

7. 결론

이 부분에서는 리듀서 및 슬라이스 단위 테스트, MSW를 사용한 RTK 쿼리 API 슬라이스 테스트, Redux 스토어와 상호 작용하는 구성 요소에 대한 통합 테스트 작성 등 Redux 툴킷 및 RTK 쿼리에 대한 다양한 테스트 전략을 다루었습니다. 이러한 모범 사례를 따르면 Redux 애플리케이션이 강력하고 안정적이며 유지 관리 가능하다는 것을 확인할 수 있습니다.

이것으로 Redux Toolkit 및 RTK Query 시리즈를 마칩니다! 이 부분들이 효과적인 테스트 전략을 포함하여 기초부터 고급 주제까지 Redux Toolkit을 이해하는 데 도움이 되었기를 바랍니다.

코딩을 즐기시고 앱이 항상 최상의 상태인지 확인하기 위해 계속 테스트해 보세요!

위 내용은 완전한 redux 툴킷(파트 -5)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!