Проверить, что компонент не изменялся (Snapshot)

Если предполагается, что компонент не должен изменяться, то текущее состояние компонента можно зафиксировать через Snapshot.

Реализуется это через тестирование, для которого надо создать файл, например «Form.test.js», и проверить снепшот через метод toMatchSnapshot().

// Form.test.js
import { render } from '@testing-library/react';
import Form from './components/Form';

test('Обновлялся ли модуль', () => {
  const form = render(<App />);
  expect(form).toMatchSnapshot();
});

При первом запуске будет создан spapshot (в папке «_snapshots_»). При повторном запуске будет проверяться совпадение текущего компонента с сохранённым (снепшотом).

Если компоненты будут совпадать, тестирование вернёт «пройдено», иначе вернёт ошибку, что компоненты отличаются.

Если исходный компонент был изменён специально, то во время тестирования надо нажать на U, чтобы обновить снепшот на актуальное состояние.

При желании можно создавать несколько снепшотов одного и того же компонента (например с разными данными).

Снепшоты могут быть полезны, если например есть форма платежной системы, которая была по 10 раз протестирована, и если она будет изменена, то при прохождении тестировании об этом будет оповещено.