Cách viết các bài kiểm tra snapshots cho các thành phần phản ứng với Jest
Kiểm tra ảnh chụp nhanh cho phép bạn đảm bảo kết quả của bạn tiếp tục hoạt động như mong đợi. Điều này rất hữu ích vì khi bạn truy cập lại mã của bạn để cập nhật theo thời gian, sẽ có nhiều khả năng những thay đổi đó có thể gây ra lỗi.Không giống như Phát triển theo hướng kiểm tra nghiêm ngặt (TDD), nơi thực hành tiêu chuẩn là viết các bài kiểm tra không đạt trước sau đó viết mã để làm cho bài kiểm tra vượt qua, kiểm tra ảnh chụp nhanh có một cách tiếp cận khác.
Khi viết các bài kiểm tra ảnh chụp nhanh cho một thành phần React, trước tiên bạn cần có mã ở trạng thái hoạt động. Sau đó, tạo ảnh chụp nhanh về kết quả dự kiến của nó với một số dữ liệu nhất định. Các bài kiểm tra ảnh chụp nhanh được commit cùng với thành phần. Jest, một khuôn khổ thử nghiệm, sẽ so sánh ảnh chụp nhanh với kết quả được hiển thị cho bài kiểm tra.
Trong trường hợp thử nghiệm thất bại, nó có thể có hai ý nghĩa. Nếu kết quả kiểm tra không mong muốn, bạn có thể cần phải giải quyết vấn đề với thành phần của bạn . Nếu kết quả kiểm tra được mong đợi, điều đó có thể nghĩa là các kiểm tra ảnh chụp nhanh cần được cập nhật để hỗ trợ kết quả mới.
Trong hướng dẫn này, bạn sẽ khám phá các bài kiểm tra ảnh chụp nhanh và cách bạn có thể sử dụng chúng đảm bảo giao diện user (UI) của bạn không thay đổi bất ngờ.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần :
- Node.js được cài đặt local mà bạn có thể thực hiện theo Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ .
- Một số quen thuộc với React và Jest có thể có lợi nhưng không bắt buộc.
Hướng dẫn này cũng sử dụng Visual Studio Code làm trình soạn thảo mã và để thuận tiện cho việc chạy một terminal tích hợp. Tuy nhiên, bạn có thể thay thế điều này bằng editor và terminal mà bạn chọn.
Hướng dẫn này đã được xác minh với Node v14.7.0, npm v6.14.7, react v16.13.1, và jest v24.9.0.
Bước 1 - Tạo một thành phần React để kiểm tra
Đầu tiên, để có thứ gì đó để kiểm tra, bạn cần tạo Ứng dụng React bằng Tạo Ứng dụng React . Đối với hướng dẫn này, dự án sẽ được gọi là react-snapshot-tests .
Mở terminal của bạn và chạy lệnh sau:
- npx create-react-app@3.4.1 react-snapshot-tests
Sau đó, thay đổi vào folder ứng dụng mới tạo:
- cd react-snapshot-tests
Tiếp theo, khởi động ứng dụng:
- npm start
Đến đây, bây giờ bạn sẽ có một Ứng dụng React đang chạy và có thể xem nó trong trình duyệt web. Tiếp theo, bạn cần tạo một thành phần mà bạn có thể kiểm tra.
Đối với mục đích của hướng dẫn này, thành phần mà bạn sẽ tạo sẽ hiển thị các đạo cụ items mà nó nhận được.
Trong terminal của bạn, hãy tạo một folder con components trong src :
- mkdir src/components
Sau đó, tạo một thành phần Items.js :
- nano src/components/Items.js
Thêm mã sau vào Items.js :
import React from 'react'; import PropTypes from 'prop-types'; /** * Render a list of items * * @param {Object} props - List of items */ function Items(props) { const { items = [] } = props; // A single item in the list, render a span. if (items.length === 1) { return <span>{items[0]}</span>; } // Multiple items on the list, render a list. if (items.length > 1) { return ( <ul> {items.map(item => <li key={item}>{item}</li>)} </ul> ); } // No items on the list, render an empty message. return <span>No items in list</span>; } Items.propTypes = { items: PropTypes.array, }; Items.defaultProps = { items: [] }; export default Items; Mã này sẽ hiển thị các đạo cụ items dựa trên số lượng:
- Nếu có nhiều mục, các mục sẽ được hiển thị trong danh sách không có thứ tự (
<ul>). - Nếu có một mục duy nhất, mục đó sẽ được hiển thị trong phần tử
<span>. - nếu không có mục nào, thông báo lỗi sẽ được hiển thị.
Cuối cùng, cập nhật App.js để hiển thị thành phần của ta :
- nano src/App.js
Thay thế nội dung của App.js bằng nội dung sau:
import React, { Component } from 'react'; import Items from './components/Items'; class App extends Component { render() { const items = [ 'Shark', 'Dolphin', 'Octopus' ]; return ( <Items items={items} /> ); } } export default App; Nếu bạn truy cập ứng dụng trong trình duyệt, sẽ có một màn hình với danh sách các giá trị bạn đã cài đặt trong App.js :
Output* Shark * Dolphin * Octopus Vì có nhiều items , nó được hiển thị dưới dạng danh sách không có thứ tự.
Tiếp theo, bạn sẽ thêm các bài kiểm tra ảnh chụp nhanh của bạn .
Bước 2 - Viết bài kiểm tra ảnh chụp nhanh
Để bắt đầu, hãy xóa file App.test.js được tạo bởi Create React App:
- rm src/App.test.js
Nó sẽ không được yêu cầu cho hướng dẫn này.
Tiếp theo, cài đặt react-test-renderer , một thư viện cho phép bạn hiển thị các thành phần React dưới dạng các đối tượng JavaScript mà không cần DOM.
- npm install react-test-renderer@16.13.1
Hãy thêm bài kiểm tra đầu tiên của bạn. Để bắt đầu, bạn sẽ tạo file Items.test.js :
- nano src/components/Items.test.js
Viết một bài kiểm tra hiển thị thành phần Items không có mục nào được chuyển thành đạo cụ:
import React from 'react'; import renderer from 'react-test-renderer'; import Items from './Items'; it('renders correctly when there are no items', () => { const tree = renderer.create(<Items />).toJSON(); expect(tree).toMatchSnapshot(); }); Tiếp theo, hãy chạy thử nghiệm. Tạo Ứng dụng React đã xử lý tất cả quá trình khởi tạo để cài đặt thử nghiệm:
- npm test
Bạn sẽ nhận được một bài kiểm tra vượt qua cho "renders correctly when there are no items" :
Khi bạn chạy kiểm tra ảnh chụp nhanh lần đầu tiên, hãy lưu ý file ảnh chụp nhanh mới được tạo bên trong folder __snapshots__ . Vì file thử nghiệm của bạn có tên là Items.test.js nên file ảnh chụp nhanh được đặt tên thích hợp là Items.test.js.snap .
Nội dung của Items.tests.js.snap phải giống như sau:
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly when there are no items 1`] = ` <span> No items in list </span> `; Ảnh chụp nhanh này trùng với kết quả chính xác của thành phần.
Jest sử dụng pretty-format để con người có thể đọc được các file ảnh chụp nhanh.
Đến đây bạn có thể tạo các bài kiểm tra cho hai trường hợp khác, trong đó có một mục và có nhiều mục.
Mở Items.tests.js :
- nano src/components/Items.test.js
Thêm các dòng mã sau:
// ... it('renders correctly when there is a single item', () => { const items = ['one']; const tree = renderer.create(<Items items={items} />).toJSON(); expect(tree).toMatchSnapshot(); }); it('renders correctly when there are multiple items', () => { const items = ['one', 'two', 'three']; const tree = renderer.create(<Items items={items} />).toJSON(); expect(tree).toMatchSnapshot(); }); Đến đây, bạn có ba bài kiểm tra được viết: một cho không mục, một cho một mục và một kiểm tra khác cho nhiều mục.
Chạy lại các bài kiểm tra:
- npm test
Tất cả ba bài kiểm tra sẽ vượt qua thành công và bây giờ bạn sẽ có ba ảnh chụp nhanh trong folder __snapshots__ của bạn .
Tiếp theo, bạn sẽ giải quyết bài kiểm tra không đạt bằng cách cập nhật bài kiểm tra ảnh chụp nhanh.
Bước 3 - Cập nhật Kiểm tra Ảnh chụp nhanh
Để hiểu rõ hơn tại sao bạn cần kiểm tra ảnh chụp nhanh, bạn sẽ giới thiệu các thay đổi đối với thành phần Items và chạy lại kiểm tra. Điều này sẽ đại diện cho một mô phỏng về những gì sẽ xảy ra khi các thay đổi được thực hiện đối với một dự án đang phát triển.
Mở Items.js :
- nano src/components/Items.js
Thêm tên lớp vào các phần tử span và li :
... /** * Render a list of items * * @param {Object} props - List of items */ function Items(props) { const { items = [] } = props; // A single item in the list, render a span. if (items.length === 1) { return <span className="item-message">{items[0]}</span>; } // Multiple items on the list, render a list. if (items.length > 1) { return ( <ul> {items.map(item => <li key={item} className="item-message">{item}</li>)} </ul> ); } // No items on the list, render an empty message. return <span className="empty-message">No items in list</span>; } Items.propTypes = { items: PropTypes.array, }; Items.defaultProps = { items: [], }; export default Items; Hãy chạy lại các bài kiểm tra:
- npm test
Bạn sẽ quan sát kết quả kiểm tra không đạt:
Jest đã khớp các ảnh chụp nhanh hiện có với thành phần được hiển thị với các thay đổi được cập nhật và không thành công vì có một số bổ sung cho thành phần của bạn. Sau đó, nó hiển thị sự khác biệt của những thay đổi được đưa vào các bài kiểm tra ảnh chụp nhanh.
Nếu thay đổi không được mong đợi, bạn đã gặp lỗi trước khi triển khai thay đổi và hiện có thể giải quyết lỗi. Nếu các thay đổi được mong đợi, bạn cần cập nhật các bài kiểm tra ảnh chụp nhanh của bạn để giúp chúng vượt qua một cách chính xác.
Đối với hướng dẫn, bạn có thể cho rằng đây là một thay đổi được mong đợi. Bạn định thêm tên lớp vào thành phần. Sau đó, bạn nên cập nhật các bài kiểm tra ảnh chụp nhanh.
Trong khi Jest ở chế độ tương tác, bạn có thể cập nhật các bài kiểm tra ảnh chụp nhanh bằng cách nhấn u với các tùy chọn được cung cấp:
Lưu ý: Ngoài ra, nếu bạn đã cài đặt Jest trên phạm vi global , bạn có thể chạy jest --updateSnapshot hoặc jest -u .
Thao tác này sẽ cập nhật ảnh chụp nhanh để trùng với cập nhật bạn đã thực hiện và các bài kiểm tra của bạn sẽ vượt qua.
Đây là bài kiểm tra ảnh chụp nhanh trước đó không có mục nào:
// ... exports[`renders correctly when there are no items 1`] = ` <span> No items in list </span> `; // ... Và đây là bài kiểm tra ảnh chụp nhanh mới được cập nhật không có mục nào:
// ... exports[`renders correctly when there are no items 1`] = ` <span className="empty-message" > No items in list </span> `; // ... Sau khi cập nhật các bài kiểm tra, họ sẽ vượt qua:
Đến đây bạn đã vượt qua các bài kiểm tra . Nếu đây là một dự án đang được phát triển, bạn có thể triển khai mã khi biết những thay đổi bạn dự định được ghi lại để phát triển trong tương lai.
Kết luận
Trong hướng dẫn này, bạn đã viết các bài kiểm tra ảnh chụp nhanh cho một thành phần React. Bạn cũng đã sửa đổi thành phần để trải nghiệm các bài kiểm tra không thành công. Cuối cùng, bạn cập nhật ảnh chụp nhanh để sửa các bài kiểm tra.
Đây là một mô phỏng nhỏ của một dự án trực tiếp. Chu kỳ kiểm tra vượt qua, không đạt và giải quyết các lỗi này sẽ là một phần của quy trình phát triển của bạn.
Kiểm tra ảnh chụp nhanh được hiểu là một trong nhiều công cụ kiểm tra khác nhau. Do đó, bạn có thể vẫn cần viết các bài kiểm tra cho các hành động và bộ giảm của bạn .
Trong khi bạn đã khám phá những điều cơ bản về các bài kiểm tra ảnh chụp nhanh, có rất nhiều điều bạn có thể học về cách viết các bài kiểm tra ảnh chụp nhanh tốt hơn. Hãy xem các phương pháp hay nhất về Snapshot từ tài liệu của Jest để tìm hiểu thêm về kiểm tra snapshot.
Nếu bạn muốn tìm hiểu thêm về React, hãy xem trang chủ đề React của ta để biết các bài tập và dự án lập trình.
Các tin liên quan
