Роль сборника рассказов при тестировании приложения React

Question

Я новичок в React, и недавно я узнал, что есть инструмент под названием storybook, который в основном помогает тестировать наши компоненты React изолированным способом. Однако я также обнаружил, что сборник рассказов используется при тестировании нашего приложения React, то есть происходит сравнение снимков. Вопрос в том, что является причиной для проверки различий снимков? Я имею в виду, как будто мы создаем определенный компонент и создаем для него моментальный снимок, чтобы другие разработчики не могли случайно изменить этот компонент, то есть снимок в сборнике рассказов помогает нам гарантировать, что не было случайного изменения созданных нами компонентов. Это правда?

Answer 1

Вы создаете тесты моментальных снимков, чтобы убедиться, что ваши Компоненты правильно отображают данные с определенным вводом.

Это способ убедиться, что ваш код по-прежнему ведет себя так, как задумано. Это сделано для того, чтобы вы случайно не сломали что-то в своей базе кода, но также предупреждает вас, когда что-то меняется.

Пример:

Скажем, у меня есть компонент с именем ProfileLink, который генерирует ссылкудля учетной записи пользователя:

function ProfileLink(props) {
  return <a href ={get_url(user.id)}>{props.user.profileName}</a>;
}

и где-то еще у меня есть функция с именем get_url:

function get_url(id) {
    return "www.example.com/user/" + id;
}

Теперь, чтобы убедиться, что мой ProfileLink всегда работает, я могу создать снимоки каждый раз, когда выполняются мои тесты, снимок будет сравниваться с текущим визуализированным компонентом.

Скажем, кто-то должен был изменить функцию get_url, он может не знать, что она используется в ProfileLink, но каккак только тесты будут запущены, вы узнаете, что что-то изменилось и в компоненте ProfileLink.