map() и filter() для элементов

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

Метод map() в контексте Enzyme

Метод map() является стандартным методом для работы с массивами в JavaScript. Он позволяет трансформировать массив, создавая новый массив с результатами применения функции к каждому элементу исходного массива.

Когда тестируется компонент, который отображает список элементов на основе данных, метод map() может использоваться для проверки того, что все элементы правильно отрендерены. В Enzyme можно использовать map() для создания массива React-элементов из списка данных и затем проверять их свойства или поведение.

Пример использования map() для рендеринга элементов списка:

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

describe('MyList component', () => {
  it('renders list items correctly', () => {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    const wrapper = shallow(<MyList items={items} />);
    
    const listItems = wrapper.find('li');
    
    items.map((item, index) => {
      expect(listItems.at(index).text()).toEqual(item);
    });
  });
});

В этом примере:

  • Сначала создается массив items, который передается в компонент MyList как пропс.
  • Внутри компонента MyList предполагается, что список элементов отображается с помощью тега <li>.
  • Мы используем метод find() для получения всех элементов <li> и затем с помощью map() проверяем, что текст каждого элемента соответствует значениям в массиве items.

Метод map() позволяет эффективно перебрать все элементы и убедиться в правильности их отображения.

Метод filter() в контексте Enzyme

Метод filter() используется для фильтрации элементов массива по определенному условию. В контексте тестирования компонентов React с Enzyme, метод filter() помогает отфильтровать элементы DOM, которые соответствуют определенным критериям, например, по классу, id или тексту.

Когда нужно проверить, какие элементы удовлетворяют определенному условию, можно использовать filter() для поиска только тех элементов, которые подходят под нужные параметры.

Пример использования filter() для поиска элементов с определенным классом:

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

describe('MyComponent', () => {
  it('should only display active items', () => {
    const items = [
      { text: 'Item 1', active: true },
      { text: 'Item 2', active: false },
      { text: 'Item 3', active: true },
    ];
    const wrapper = shallow(<MyComponent items={items} />);
    
    const activeItems = wrapper.find('li').filterWhere(item => item.prop('className') === 'active');
    
    expect(activeItems.length).toBe(2);
  });
});

Здесь:

  • Массив items содержит объекты с полями text и active.
  • В компоненте MyComponent предполагается, что каждый элемент списка отображается в виде <li>, и активные элементы получают класс active.
  • Используя filterWhere(), мы отбираем только те элементы <li>, которые имеют класс active.
  • Проверяем, что количество активных элементов равно 2, что соответствует ожиданиям.

Сравнение map() и filter()

  • map() используется, когда нужно пройти по всем элементам массива и выполнить операцию с каждым элементом, результатом которой будет новый массив. В тестировании компонентов это полезно, когда нужно проверять соответствие всех элементов каким-то условиям или значениям.
  • filter() используется, когда необходимо выбрать только те элементы, которые соответствуют определенному условию. В тестах компонентов это удобно для поиска элементов, удовлетворяющих каким-либо критериям, например, наличию определенного класса или текста.

Оба метода могут быть полезными в разных ситуациях и часто используются совместно. Например, сначала с помощью filter() можно отфильтровать нужные элементы, а затем с помощью map() пройтись по этим отфильтрованным элементам для более детальных проверок.

Пример комбинированного использования map() и filter()

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

describe('MyComponent', () => {
  it('should render only active items with correct text', () => {
    const items = [
      { text: 'Item 1', active: true },
      { text: 'Item 2', active: false },
      { text: 'Item 3', active: true },
    ];
    const wrapper = shallow(<MyComponent items={items} />);
    
    const activeItems = wrapper.find('li')
      .filterWhere(item => item.prop('className') === 'active')
      .map(item => item.text());
    
    expect(activeItems).toEqual(['Item 1', 'Item 3']);
  });
});

В этом примере сначала с помощью filterWhere() отбираются элементы с классом active, а затем с помощью map() извлекается текст каждого из этих элементов. Результатом является массив активных элементов, который затем можно сравнить с ожидаемым значением.

Заключение

Использование методов map() и filter() в Enzyme позволяет эффективно работать с массивами элементов, отфильтровывать нужные данные и проверять их соответствие ожидаемым значениям. Оба метода дополняют друг друга, обеспечивая гибкость при тестировании компонентов, которые рендерят списки данных.

Оглавление