HomeLập trìnhJavaScriptThư viện kiểm...

Thư viện kiểm tra phản ứng – Hướng dẫn với các ví dụ về mã JavaScript


Bài đăng này sẽ giúp bạn tìm hiểu Thư viện kiểm tra React là gì và cách bạn có thể sử dụng nó để kiểm tra ứng dụng React của mình.

Hướng dẫn này giả định rằng bạn đã biết một số JavaScript cơ bản và hiểu những điều cơ bản về cách thức hoạt động của React.

Thư viện kiểm tra React là một công cụ tiện ích kiểm tra được xây dựng để kiểm tra cây DOM thực tế do React hiển thị trên trình duyệt. Mục tiêu của thư viện là giúp bạn viết các bài kiểm tra giống với cách người dùng sẽ sử dụng ứng dụng của bạn. Điều này có thể giúp bạn tự tin hơn rằng ứng dụng của bạn hoạt động như dự định khi người dùng thực sử dụng nó.

Thư viện thực hiện điều này bằng cách cung cấp các phương thức tiện ích sẽ truy vấn DOM giống như cách người dùng sẽ làm. Ví dụ: người dùng sẽ tìm thấy một nút để ‘Lưu’ tác phẩm của họ bằng văn bản của nó, vì vậy thư viện cung cấp cho bạn getByText() phương pháp. Bạn sẽ tìm hiểu thêm về các phương pháp kiểm tra của thư viện sau này.

Nhưng trước tiên, hãy xem một ví dụ về React Testing Library đang hoạt động.

Cách sử dụng Thư viện thử nghiệm React

Một ứng dụng React được tạo bằng Create React App (hoặc CRA) đã bao gồm cả React Testing Library và Jest theo mặc định. Vì vậy, tất cả những gì bạn cần làm là viết mã kiểm tra của mình.

Nếu bạn muốn sử dụng Thư viện kiểm tra React bên ngoài ứng dụng CRA, thì bạn cần cài đặt cả Thư viện kiểm tra React và Jest theo cách thủ công với NPM:

Đọc thêm  Thuật toán JavaScript và Cấu trúc dữ liệu cần giải thích rõ hơn - Cộng tác viên
npm install --save-dev @testing-library/react jest
Cài đặt thư viện thử nghiệm React và Jest

Bạn cần cài đặt Jest vì Thư viện kiểm tra React chỉ cung cấp các phương thức giúp bạn viết các tập lệnh kiểm tra. Vì vậy, bạn vẫn cần một khung kiểm tra JavaScript để chạy mã kiểm tra.

Bạn cũng có thể sử dụng các khung thử nghiệm khác như Mocha hoặc Jasmine, nhưng tôi sẽ sử dụng Jest vì nó hoạt động tốt với cả React và Thư viện thử nghiệm.

Đối với hướng dẫn này, tôi sẽ tạo một ứng dụng React mới với CRA bằng cách sử dụng mẫu mặc định:

npx create-react-app react-test-example
Tạo một ứng dụng React mới với CRA

Sau khi ứng dụng được tạo, bạn sẽ có một App.test.js tệp đã được tạo bên trong thư mục src/. Nội dung của tệp sẽ như sau:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
Mã kiểm tra CRA mặc định

Đoạn mã kiểm tra ở trên đã sử dụng Thư viện kiểm tra React render phương pháp để hiển thị hầu như App thành phần nhập khẩu từ App.js tập tin và nối nó vào document.body nút. Bạn có thể truy cập HTML được hiển thị thông qua screen vật.

Để xem kết quả của render() gọi, bạn có thể sử dụng screen.debug() phương pháp:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  screen.debug();
});
Gỡ lỗi các phần tử được hiển thị bởi Thư viện thử nghiệm React

Sau đó mở thiết bị đầu cuối của bạn và chạy npm run test chỉ huy. Bạn sẽ thấy toàn bộ document.body cây được kết xuất vào bảng điều khiển của bạn:

<body>
  <div>
    <div class="App">
      <header class="App-header">
        <img alt="logo" class="App-logo" src="https://www.freecodecamp.org/news/react-testing-library-tutorial-javascript-example-code/logo.svg" />
        <p>
          Edit<code> src/App.js </code>and save to reload.
        </p>
        <a
          class="App-link"
          href="https://reactjs.org"
          rel="noopener noreferrer"
          target="_blank"
        >
          Learn React
        </a>
      </header>
    </div>
  </div>
</body>
Nội dung tài liệu được hiển thị bởi Thư viện thử nghiệm React

Các screen đối tượng cũng có các phương thức kiểm tra DOM đã được liên kết với nó. Đó là lý do tại sao mã kiểm tra ở trên có thể sử dụng screen.getByText() để truy vấn mỏ neo <a> phần tử bởi nó văn bảnnội dung giá trị.

Đọc thêm  Học JavaScript bằng tiếng Tây Ban Nha – Khóa học đầy đủ cho người mới bắt đầu

Cuối cùng, mã kiểm tra sẽ xác nhận xem phần tử liên kết có sẵn trong document đối tượng hay không với expect phương pháp từ Jest:

expect(linkElement).toBeInTheDocument();
Xác nhận xem phần tử liên kết có trong tài liệu hay không

Khi không tìm thấy phần tử liên kết, Jest sẽ đánh dấu bài kiểm tra là thất bại.

Các phương pháp thư viện thử nghiệm phản ứng để tìm kiếm các phần tử

Hầu hết các trường hợp thử nghiệm React của bạn nên sử dụng các phương thức tìm phần tử. Thư viện kiểm tra React cung cấp cho bạn một số phương pháp để tìm một phần tử theo các thuộc tính cụ thể bên cạnh getByText() phương pháp trên:

  • getByText(): tìm phần tử theo giá trị textContent của nó
  • getByRole(): bởi nó role giá trị thuộc tính
  • getByLabelText(): bởi nó label giá trị thuộc tính
  • getByPlaceholderText(): bởi nó placeholder giá trị thuộc tính
  • getByAltText(): bởi nó alt giá trị thuộc tính
  • getByDisplayValue(): bởi nó value thuộc tính, thường cho <input> yếu tố
  • getByTitle(): bởi nó title giá trị thuộc tính

Và khi những phương pháp này là không đủ, bạn có thể sử dụng getByTestId() phương thức, cho phép bạn tìm một phần tử bằng data-testid thuộc tính:

import { render, screen } from '@testing-library/react';

render(<div data-testid="custom-element" />);
const element = screen.getByTestId('custom-element');
Nhận phần tử theo giá trị data-testid

Nhưng kể từ khi chọn các phần tử bằng cách sử dụng data-testid thuộc tính không giống với cách người dùng thực sẽ sử dụng ứng dụng của bạn, tài liệu khuyên bạn chỉ nên sử dụng nó như là phương sách cuối cùng khi tất cả các phương pháp khác không tìm thấy phần tử của bạn. Nói chung, việc tìm kiếm theo Văn bản, Vai trò hoặc Nhãn sẽ bao gồm hầu hết các trường hợp.

Cách kiểm tra các sự kiện do người dùng tạo với thư viện kiểm tra React

Ngoài việc tìm xem các phần tử có trong nội dung tài liệu của bạn hay không, React Testing Library còn giúp bạn kiểm tra các sự kiện do người dùng tạo, chẳng hạn như nhấp vào nút và nhập giá trị vào hộp văn bản.

Đọc thêm  Hướng dẫn nhanh chóng và đơn giản về Biểu thức chính quy JavaScript

Các user-event thư viện là thư viện đồng hành để mô phỏng tương tác giữa người dùng và trình duyệt. Giả sử bạn có một thành phần nút để chuyển đổi giữa chủ đề Sáng và Tối như sau:

import React, { useState } from "react";

function App() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    const nextTheme = theme === "light" ? "dark" : "light";
    setTheme(nextTheme);
  };

  return <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>;
}

export default App;

Tiếp theo, bạn tạo thử nghiệm tìm nút và mô phỏng sự kiện nhấp chuột bằng cách sử dụng userEvent.click() phương pháp. Sau khi nhấp vào nút, bạn có thể xác nhận thử nghiệm thành công bằng cách kiểm tra xem văn bản phần tử nút có chứa “tối” hay không:

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";

test("Test theme button toggle", () => {
  render(<App />);
  const buttonEl = screen.getByText(/Current theme/i);
    
  userEvent.click(buttonEl);
  expect(buttonEl).toHaveTextContent(/dark/i);
});
Người dùng thử nghiệm nhấp vào nút và xác nhận nội dung

Và đó là cách bạn có thể mô phỏng các sự kiện của người dùng với Thư viện thử nghiệm React. Các user-event thư viện cũng có một số phương pháp khác như dblClick để nhấp đúp vào một phần tử và type để gõ vào một hộp văn bản. Bạn có thể kiểm tra các tài liệu cho user-event thư viện để biết thêm thông tin.

Phần kết luận

Các thử nghiệm của bạn càng giống với cách phần mềm của bạn được sử dụng, chúng càng có thể mang lại cho bạn sự tự tin hơn.
(Nguồn: Kent C.DoddsReact Testing Tác giả thư viện)

Người dùng thực sẽ không thấy chi tiết triển khai như trạng thái hoặc đạo cụ hiện có trong các thành phần React của bạn. Họ chỉ nhìn thấy các phần tử HTML được hiển thị trên trình duyệt. Thư viện kiểm tra phản ứng khuyến khích bạn kiểm tra hành vi của ứng dụng thay vì chi tiết triển khai.

Bằng cách thử nghiệm ứng dụng của bạn theo cách người dùng sẽ sử dụng ứng dụng đó, bạn có thể tin tưởng rằng ứng dụng của mình sẽ hoạt động như mong đợi khi tất cả các trường hợp thử nghiệm đã vượt qua. Để biết thêm thông tin, bạn có thể truy cập tài liệu cho Thư viện thử nghiệm React.

Cảm ơn bạn đã đọc. Tôi hy vọng bạn đã học được một cái gì đó mới từ bài viết này.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status