Kiểm thử ứng dụng Redux đã kết nối bằng Redux Testing Library

Giới thiệu về Redux Testing Library

Redux là một thư viện quản lý trạng thái phổ biến cho các ứng dụng JavaScript. Nó cung cấp một cấu trúc dữ liệu trung tâm, gọi là store, để lưu trữ trạng thái của ứng dụng. Các thành phần React có thể kết nối với store này thông qua React-Redux, một thư viện liên kết Redux với React.

Redux Testing Library là một tập hợp các công cụ hữu ích để kiểm thử các ứng dụng Redux đã kết nối. Nó được xây dựng trên nền tảng của React Testing Library, một thư viện kiểm thử được thiết kế để kiểm tra các thành phần React một cách đơn giản và hiệu quả.

Thiết lập Redux Testing Library

Để bắt đầu với Redux Testing Library, hãy cài đặt các gói phụ thuộc cần thiết:

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

Tiếp theo, hãy tạo một tệp cấu hình mới cho Redux Testing Library, ví dụ như setupTests.js, và thêm đoạn mã sau đây:

import '@testing-library/jest-dom/extend-expect'; import { configureStore } from '@reduxjs/toolkit'; import { render } from '@testing-library/react'; import { Provider } from 'react-redux'; const configureTestStore = (initialState) => { const store = configureStore({ reducer: (state = initialState, action) => state }); const originalDispatch = store.dispatch; store.dispatch = jest.fn(originalDispatch); return store; }; const renderWithRedux = (component, initialState) => { const store = configureTestStore(initialState); return { ...render({component}), store, }; }; global.renderWithRedux = renderWithRedux; 

Trong đoạn mã này, chúng ta đã tạo một hàm configureTestStore để khởi tạo một Redux store mới với một reducer đơn giản trả về trạng thái ban đầu. Hàm renderWithRedux sau đó sử dụng store này để render các thành phần được bao bọc bởi Provider của React-Redux, cho phép chúng truy cập vào store và kết nối với Redux.

Viết các kiểm thử tích hợp với Redux Testing Library

Bây giờ chúng ta đã sẵn sàng để viết các kiểm thử tích hợp cho các thành phần Redux đã kết nối. Hãy xem xét một ví dụ đơn giản về một thành phần Counter kết nối với Redux, có chức năng tăng và giảm một số đếm:

import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { increment, decrement } from './counterSlice'; const Counter = () => { const count = useSelector((state) => state.counter.value); const dispatch = useDispatch(); const handleIncrement = () => { dispatch(increment()); }; const handleDecrement = () => { dispatch(decrement()); }; return ( 
 
Counter
 
Current count: {count}
 Increment Decrement 
 ); }; export default Counter; 

Để kiểm thử thành phần này, chúng ta có thể tạo một tệp kiểm thử mới, chẳng hạn như Counter.test.js, và viết các trường hợp kiểm thử như sau:

import React from 'react'; import { fireEvent } from '@testing-library/react'; import Counter from './Counter'; describe('Counter component', () => { it('should increment count when the Increment button is clicked', () => { const { getByText, getByRole } = renderWithRedux(, { counter: { value: 0 } }); const incrementButton = getByRole('button', { name: 'Increment' }); fireEvent.click(incrementButton); const count = getByText('Current count: 1'); expect(count).toBeInTheDocument(); }); it('should decrement count when the Decrement button is clicked', () => { const { getByText, getByRole } = renderWithRedux(, { counter: { value: 5 } }); const decrementButton = getByRole('button', { name: 'Decrement' }); fireEvent.click(decrementButton); const count = getByText('Current count: 4'); expect(count).toBeInTheDocument(); }); }); 

Trong đoạn mã trên, chúng ta sử dụng hàm renderWithRedux đã được định nghĩa trước đó để render thành phần Counter với trạng thái ban đầu khác nhau. Sau đó, chúng ta sử dụng các phương thức như getByText và getByRole từ React Testing Library để truy cập các phần tử trong DOM và gửi sự kiện click bằng cách sử dụng fireEvent.click. Cuối cùng, chúng ta kiểm tra xem số đếm hiện tại có phù hợp với giá trị mong đợi hay không.

Bằng cách sử dụng Redux Testing Library, chúng ta có thể viết các kiểm thử tích hợp mạnh mẽ và dễ bảo trì cho các ứng dụng Redux đã kết nối. Thư viện này cung cấp các công cụ hữu ích để tương tác với Redux store và kiểm tra rằng các hành động và reducer đang hoạt động đúng cách.

Lợi ích của kiểm thử tích hợp với Redux Testing Library

Việc kiểm thử tích hợp với Redux Testing Library mang lại nhiều lợi ích cho quá trình phát triển ứng dụng React và Redux:

Đảm bảo chất lượng

Các kiểm thử tích hợp giúp bạn xác minh rằng các thành phần đã kết nối của ứng dụng đang hoạt động đúng cách trong môi trường tương tác với Redux store. Điều này đảm bảo rằng ứng dụng của bạn có chất lượng cao và ít gặp lỗi hơn.

Dễ bảo trì

Khi sử dụng Redux Testing Library, các kiểm thử của bạn sẽ dễ đọc và dễ bảo trì hơn. Các công cụ và API được cung cấp bởi thư viện này giúp viết các kiểm thử giống như cách người dùng sẽ tương tác với ứng dụng, giúp đoạn mã kiểm thử trở nên gần gũi và dễ hiểu hơn.

Phát hiện lỗi sớm

Các kiểm thử tích hợp cho phép bạn phát hiện các vấn đề trong ứng dụng của mình ngay từ đầu quá trình phát triển. Bạn có thể dễ dàng xác định và sửa chữa các lỗi trước khi chúng trở thành vấn đề lớn hơn, giúp tiết kiệm thời gian và chi phí.

Tăng tính tin cậy

Khi có một bộ kiểm thử tích hợp toàn diện, bạn có thể tự tin hơn khi thực hiện các thay đổi trong ứng dụng của mình. Các kiểm thử sẽ đảm bảo rằng các thay đổi đó không gây ra hậu quả bất ngờ và ảnh hưởng đến các tính năng hiện có.

Kết luận

Redux Testing Library là một công cụ mạnh mẽ để kiểm thử các ứng dụng Redux đã kết nối. Bằng cách sử dụng thư viện này, bạn có thể tạo ra các kiểm thử tích hợp dễ bảo trì, đảm bảo chất lượng và tính tin cậy của ứng dụng của mình. Việc áp dụng các thực tiễn kiểm thử tốt không chỉ giúp bạn phát hiện và sửa chữa các lỗi sớm hơn mà còn giúp bạn xây dựng các ứng dụng React và Redux chất lượng cao.

Hãy thường xuyên kiểm thử các ứng dụng của bạn và tận dụng tối đa sức mạnh của Redux Testing Library để đạt được mục tiêu này!

Các bạn có thể tham khảo thêm nguồn khác: