“Библиотека тестирования: изучение метода getByText с пробелами”

Когда дело доходит до тестирования пользовательских интерфейсов, библиотека тестирования предоставляет мощный набор инструментов, позволяющих гарантировать, что ваши компоненты ведут себя должным образом. Одним из часто используемых методов является getByText, который позволяет искать элементы по их текстовому содержимому. В этой статье мы рассмотрим различные методы и примеры кода для эффективного использования метода getByText, даже при работе с пробелами в тексте. Давайте погрузимся!

Метод 1: точное совпадение текста
Метод getByText можно использовать для поиска элементов, содержащих точное совпадение текста. Вот пример:

import { render, screen } from "@testing-library/react";
test("Finding an element with exact text match", () => {
  render(<MyComponent />);
  const element = screen.getByText("Hello, World!");
  expect(element).toBeInTheDocument();
});

Метод 2: сопоставление частичного текста
Иногда вам может потребоваться найти элемент, содержащий определенное слово или фразу, даже если оно не является точным совпадением. Метод getByText поддерживает регулярные выражения, которые можно использовать для достижения этой цели. Вот пример:

import { render, screen } from "@testing-library/react";
test("Finding an element with partial text match", () => {
  render(<MyComponent />);
  const element = screen.getByText(/Hello/);
  expect(element).toBeInTheDocument();
});

Метод 3: игнорирование учета регистра
По умолчанию метод getByText учитывает регистр. Однако вы можете использовать регулярные выражения с флагом iдля выполнения поиска без учета регистра. Вот пример:

import { render, screen } from "@testing-library/react";
test("Finding an element with case-insensitive text match", () => {
  render(<MyComponent />);
  const element = screen.getByText(/hello/i);
  expect(element).toBeInTheDocument();
});

Метод 4: обработка пробелов в тексте
При работе с пробелами в тексте вы можете использовать функцию normalize-spaceXPath для удаления начальных, конечных и последовательных пробелов. Вот пример:

import { render, screen } from "@testing-library/react";
test("Finding an element with spaces in text", () => {
  render(<MyComponent />);
  const element = screen.getByText(
    (content, element) => content === element.normalize-space()
  );
  expect(element).toBeInTheDocument();
});

В этой статье мы рассмотрели различные методы эффективного использования метода getByText в библиотеке тестирования, даже при работе с пробелами в тексте. Мы рассмотрели сопоставление точного текста, части текста, текста без учета регистра и обработку пробелов с помощью функции normalize-space. Используя эти методы, вы можете написать комплексные тесты, чтобы убедиться в правильности ваших пользовательских интерфейсов.