text() и textContent

В JavaScript тестировании, особенно при работе с библиотеками для тестирования пользовательских интерфейсов, часто возникают ситуации, когда необходимо проверить текстовое содержимое элементов. В Enzyme для этих целей используются методы text() и textContent, которые позволяют извлечь текстовое содержимое элементов и проводить соответствующие проверки. Эти методы играют ключевую роль в тестировании взаимодействия пользователя с элементами страницы, обеспечивая более глубокое понимание поведения интерфейса.

Метод text() является одним из самых часто используемых в Enzyme для получения текста, содержащегося в DOM-элементе. Он извлекает строку, которая является текстом, видимым на экране, игнорируя любые скрытые или не визуализируемые элементы. Это позволяет сделать точные проверки того, какой именно текст отображается пользователю.

Пример использования text():

import { shallow } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('<MyComponent />', () => {
  it('должен отображать правильный текст', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.text()).toContain('Привет, мир!');
  });
});

В этом примере метод text() извлекает весь текст внутри компонента MyComponent, и с помощью метода toContain() проверяется, что в нем содержится строка 'Привет, мир!'.

Как работает text()

Метод text() обрабатывает структуру DOM, возвращая текстовое содержимое всех элементов, включая дочерние элементы. При этом важно отметить, что метод возвращает весь текст, включая текст из вложенных тегов. Однако, если элемент или его дочерние элементы скрыты с помощью CSS или других механизмов, они не будут включены в результат. Это поведение важно учитывать при тестировании компонентов с динамическим контентом.

Преимущества использования text()

  1. Простота использования: Метод легко интегрируется в любые тесты и позволяет быстро извлечь текстовое содержимое элемента.
  2. Учет видимого текста: text() фокусируется на отображаемом пользователю контенте, игнорируя элементы, которые скрыты с помощью CSS, что делает его удобным для проверки того, что увидит конечный пользователь.
  3. Подходит для всех типов компонентов: Метод работает как с функциональными, так и с классовыми компонентами React, что делает его универсальным инструментом.

textContent

Метод textContent является более низкоуровневым методом, который доступен через API DOM. Он возвращает текстовое содержимое элемента и его всех дочерних узлов, включая скрытые элементы. Это отличие от text(), который исключает скрытые элементы, делает textContent более универсальным для определенных типов тестов.

Пример использования textContent:

import { shallow } from 'enzyme';
import React from 'react';
import MyComponent from './MyComponent';

describe('<MyComponent />', () => {
  it('должен содержать правильный текст', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.get(0).textContent).toBe('Привет, мир!');
  });
});

В этом примере используется свойство textContent, которое напрямую доступно через DOM-узел компонента. Этот подход позволяет получать текстовое содержимое, включая скрытые элементы.

Различия между text() и textContent

  1. Учет скрытых элементов:

    • text(): игнорирует скрытые элементы.
    • textContent: включает все текстовые узлы, даже те, что скрыты от пользователя.

  2. Тип возвращаемых данных:

    • text(): возвращает строку, содержащую только видимый текст.
    • textContent: возвращает текстовое содержимое элемента, включая текст из скрытых элементов.

  3. Сложность использования:

    • text(): проще для использования в тестах, так как возвращает строку без необходимости доступа к низкоуровневому API DOM.
    • textContent: требует работы с внутренними DOM-элементами, что делает его менее удобным в большинстве тестовых случаев.

Когда использовать каждый метод

Использование text() рекомендуется в тех случаях, когда необходимо протестировать только видимый текст, который будет доступен пользователю. Этот метод идеально подходит для большинства тестов, ориентированных на пользовательский интерфейс, так как он отражает именно тот текст, с которым взаимодействует конечный пользователь.

Использование textContent может быть полезно, если требуется протестировать полное текстовое содержимое элемента, включая скрытые элементы, например, в случаях, когда скрытые элементы могут влиять на другие аспекты теста, такие как состояние или поведение компонента.

Пример с различием в поведении

import { shallow } from 'enzyme';
import React from 'react';

const HiddenTextComponent = () => (
  <div>
    <span>Текст видимый</span>
    <span style={{ display: 'none' }}>Текст скрытый</span>
  </div>
);

describe('<HiddenTextComponent />', () => {
  it('должен возвращать только видимый текст для text()', () => {
    const wrapper = shallow(<HiddenTextComponent />);
    expect(wrapper.text()).toContain('Текст видимый');
    expect(wrapper.text()).not.toContain('Текст скрытый');
  });

  it('должен возвращать весь текст для textContent()', () => {
    const wrapper = shallow(<HiddenTextComponent />);
    expect(wrapper.get(0).textContent).toContain('Текст видимый');
    expect(wrapper.get(0).textContent).toContain('Текст скрытый');
  });
});

В этом примере видно, что метод text() не включает скрытые элементы, в то время как textContent() извлекает весь текст, включая скрытые.

Заключение

Методы text() и textContent играют важную роль в тестировании компонентов React с использованием Enzyme. Понимание их различий и применения в зависимости от ситуации позволяет разрабатывать более точные и надежные тесты. text() идеально подходит для проверки видимого текста, а textContent — для получения полного содержимого, включая скрытые элементы.

Оглавление