Чем React Testing Library отличается от Enzyme по подходу?

Философия тестирования

React Testing Library (RTL) и Enzyme представляют два разных подхода к тестированию React-компонентов. RTL следует принципу: "Чем больше ваши тесты похожи на то, как ваше приложение используется, тем больше уверенности они могут вам дать". Enzyme же предоставляет более низкоуровневый доступ к внутренностям компонента.

Ключевые различия

• Подход к поиску элементов: RTL использует запросы, основанные на доступности (getByRole, getByText, getByLabelText), имитируя действия пользователя. Enzyme использует селекторы (find('.class'), find(Component)).
• Доступ к состоянию: RTL не предоставляет прямого доступа к состоянию или пропсам компонента. Enzyme позволяет вызывать .state(), .props(), .instance().
• Тестирование деталей реализации: RTL активно discourages тестирование внутренних методов и состояний. Enzyme это поощряет.

Пример кода

// React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText('1')).toBeInTheDocument();
});

// Enzyme
import { shallow } from 'enzyme';
import Counter from './Counter';

test('increments counter', () => {
  const wrapper = shallow(<Counter />);
  wrapper.find('button').simulate('click');
  expect(wrapper.state('count')).toBe(1);
});

В примере RTL проверяет, что пользователь видит '1' после клика. Enzyme проверяет внутреннее состояние count.

Вывод

React Testing Library предпочтительнее для создания надежных тестов, которые не ломаются при рефакторинге. Enzyme может быть полезен для быстрого прототипирования тестов, но его использование часто приводит к хрупким тестам, привязанным к реализации.