​Тестирование простого компонента

Самый примитивный пример тестирования компонента:

https://codesandbox.io/s/testing-react-junior-i6ldm?file=/src/Hello.test.js

- beforeEach (метод Jest) - создание контейнера для рендера
- ReactDOM.unmountComponentAtNode - размонтирование React-компонента из контейнера после выполнения теста
- afterEach (метод Jest) - удаление контейнера после выполнения теста
- it (метод Jest) - объявление блока тестов
- act (вспомогательная функция из пакета react-dom/test-utils) - обеспечивает завершенность процесса рендеринга компонента перед выполнением тестов
- ReactDOM.render - рендерит компонент
- expect (метод Jest) - осуществляет проверку некоторого утверждения.

Jest предоставляет множество различных проверок (полный список здесь https://jestjs.io/docs/expect), мы воспользовались для примера самой простой - toBe, которая проверяет равенство примитивных значений или ссылок на объекты.

Результаты выполнения тестов можно увидеть во вкладке Tests.

#документация #примерыкода #тестирование

Mock-функции в Jest

Mock-функция - это фиктивная реализация некоторого интерфейса, предназначенная для упрощения тестирования.

Создать такую функцию можно с помощью метода jest.fn(). В качестве необязательного аргумента можно передать реализацию мок-функции (которая будет вызываться при обращении к мок-функции). Реализацию можно также установить после создания, с помощью метода mockFn.mockImplementation(fn).

Подробнее о моках в документации Jest: https://jestjs.io/docs/mock-function-api

У мок-функций есть ряд полезных методов, позволяющих, например, посмотреть все вызовы.

Кроме того, передав мок-функцию в метод expect, мы получаем еще ряд полезных утверждений вроде toHaveBeenCalled().

Помимо простых моков есть еще шпионы (spies). Они имеют интерфейс мок-функции и отслеживают вызовы некоторого существующего метода. Создать шпиона можно с помощью метода jest.spyOn(object, methodName) - он будет отслеживать вызовы object[methodName]. Для них также можно переопределить существующую функциональность с помощью mockFn.mockImplementation().

Например, можно установить шпиона для метода fetch:

jest.spyOn(global, "fetch").mockImplementation(setupFetchStub)

#тестирование #jest

Замена методов

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

Такие функции можно заменить шпионами Jest (jest.spyOn) и установить для них фиктивную реализацию.

https://codesandbox.io/s/mock-methods-react-junior-0oxgq?file=/src/Pokemon.test.js

Примечание: в примере запрос данных осуществляется с помощью метода Utils.fetch и шпион устанавливается именно для него:

jest.spyOn(Utils, 'fetch')

Это сделано для демонстрации, так как в codesandbox не получилось установить шпиона для global.fetch. В нормальной среде выполнения должно быть:

jest.spyOn(global, 'fetch')

#документация #тестирование #примерыкода

Фиктивные модули

Создать фиктивную реализацию можно не только для функции, но и для целого модуля.

Для этого предназначен метод jest.mock(moduleName, factory, options).

Пример в документации (рус.): https://ru.reactjs.org/docs/testing-recipes.html#mocking-modules

#документация #тестирование #jest

События при тестировании

Создать событие на элементе можно стандартным методом dispatchEvent, передав ему объект события.

Важно: Объекту события нужно передать опцию bubbles: true, чтобы обработчик событий React его увидел и автоматически передал в корень документа.

#документация #тестирование

Фиктивные таймеры

Jest предоставляет моки и для таймеров (setTimeout, setInterval): https://jestjs.io/ru/docs/timer-mocks.

👉 jest.useFakeTimers() и jest.useRealTimers() позволяют переключить режим работы таймеров.
👉 jest.advanceTimersByTime(ms) сдвигает время на указанное количество милисекунд.

Есть еще пара методов, которые могут пригодиться: runAllTimers и runOnlyPendingTimers.

Пример в документации (рус.): https://ru.reactjs.org/docs/testing-recipes.html#timers

#документация #тестирование #jest

Снапшоты

Jest позволяет делать снапшоты - сохранять "снимки" данных. Иначе говоря, сохраняется результат рендера компонента. При внесении изменений этот "снимок" изменится.

Пример в документации (рус.): https://ru.reactjs.org/docs/testing-recipes.html#snapshot-testing

#документация #тестирование #jest

Тестовый рендерер

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

Подробный обзор тестового рендера в документации (рус.): https://ru.reactjs.org/docs/test-renderer.html
Руководство по тестированию с помощью снимков в документации Jest: https://jestjs.io/ru/docs/snapshot-testing

#документация #тестирование

Первый подход к документации React завершен - и завершен неплохо! Разобрались с основными понятиями, заглянули одним глазом под капот, потрогали тестирование.
Осталось еще несколько незатронутых разделов, и самый важный из них - Участие в проекте. Он сложный, не для новичков, вернемся к нему попозже.

На что нужно обратить более пристальное внимание?

На самом деле, на многое:

👉 тестирование,
👉 интеграция стилей в проект,
👉 типизация,
👉 тесное взаимодействие с DOM (например, сложные анимации),
👉 оптимизация.

Обязательно всем этим займемся. А сейчас переходим к практическому разделу документации - туториалу по созданию игры на React.

Крестики-нолики

https://ru.reactjs.org/tutorial/tutorial.html

Документация предлагает нам написать игру в крестики-нолики: игровое поле 3х3, два игрока, которые ходят по очереди. Победитель определяется по заполненности горизонтального, вертикального или диагонального ряда.

Бонусом идет еще сохранение истории ходов и возможность перейти на любой предыдущий ход и продолжить игру с него.

Игра создается по этапам, для каждого есть заготовка в codepen - можно перейти и разобраться.

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

Этап 1. Состояние игры и рендер игрового поля

https://codepen.io/gaearon/pen/QvvJOv?editors=0010

Создаются компоненты Game, Board и Square - отдельная клетка поля.

Состояние игры squares - это массив значений всех клеток (может быть null, 'x' или 'o').
По философии React состояние должно подниматься до ближайшего заинтересованного компонента, поэтому оно будет располагаться в компоненте Board и передаваться в каждую клетку Square через пропсы. Также в каждую клетку будет передаваться обработчик клика, необходимый для изменения состояния клетки при клике (устновка "крестика" или "нолика").

Здесь мы видим четкий пример однонаправленного потока данных и модели событий. Square является управляемым компонентом, поскольку полностью контролируется из Board.

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

Этап 2. Очередность хода

https://codepen.io/gaearon/pen/KmmrBy?editors=0010

Чтобы крестики и нолики чередовались, добавляется еще одно поле в состояние xIsNext, которое инвертируется после каждого хода.

Этап 3. Определение победителя

https://codepen.io/gaearon/pen/LyyXgK?editors=0010

Наконец, добавляется проверка заполненности рядов, которая осуществляется после каждого хода.

Этап 4. История ходов

https://codepen.io/gaearon/pen/gWWZgR?editors=0010

История ходов - это просто массив последовательных слепков состояний для каждого хода. При возвращении на определенный шаг мы можем просто взять его слепок и заменить им текущее состояние.

Тут есть важный момент: историй шагов будет пользоваться не только в компоненте Board, но и в списке ходов. Поэтому состояние поднимается из Board до Game.

#документация #примерыкода

Крестики-нолики

https://codesandbox.io/s/tic-tac-toe-react-junior-8wb1t

Моя версия демо-игры Крестики-Нолики из документации.

Классовые компоненты заменены на функциональные + хуки. Для хранения сложного состояния используется useReducer и система событий.

Также внесены добавления, рекомендованные в документации:

👉 Отобразите позицию для каждого хода в формате (колонка, строка) в списке истории ходов. (для каждого слепка состояния в history кроме squares сохраняется coords - позиция сделанного хода).
👉 Выделите выбранный элемент в списке ходов. (Простое сравнение индексов)
👉 Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования.
👉 Добавьте переключатель, который позволит вам сортировать ходы по возрастанию или по убыванию. (Главное не потерять порядок ходово)
👉 Когда кто-то выигрывает, подсветите три клетки, которые привели к победе. (При расчете победителя кроме символа "Х" или "О" передается также выигрышная комбинация)
👉 Когда победителя нет, покажите сообщение о том, что игра окончилась вничью. (Проверка на наличие свободных клеток)

#документация #примерыкода

10 способов стилизации React-приложений

React не работает со стилями и не имеет предпочтений в том, как стилизовать приложение. Это значит, что мы можем действовать по своему усмотрению: можем писать инлайновый стили или по традиции подключать внешние файлы. Плюс есть еще десяток способов, которые пытаются добавить в CSS возможности JS и расширить его.

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

В статье (рус.): https://www.cat-in-web.ru/10-ways-to-style-react/ представлен краткий обзор способов стилизации React-компонентов с примерами кода.

👉 инлайновые стили
👉 внешние таблицы стилей
👉 CSS-модули - решают проблему конфликтов стилей для классов с одинаковыми именами. В разных компонентах может быть класс .container, оформленный по-разному
👉 CSS-препроцессоры
👉 Styled Components - стили пишутся как CSS, но могут использовать данные из JavaScript
👉 React JSS - стили в виде JS-объекта
👉 Radium - предоставляет обертку для компонентов и возможность удобно задавать стили, включая псевдоселекторы
👉 React Shadow - инкапсулирует стили компонента внутри теневого DOM
👉 JSX Style - набор компонентов для стилизации React приложений
👉 Утилитарные фреймворки

#инструменты #ссылки #стили

Итак, документация закончилась, куда двигаться дальше? Страшновато делать шаг за пределы уже знакомого систематизированного маленького мирка, да? Вокруг слишком много неизвестного, но кое за что все же можно ухватиться.

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

Обычный скучный CSS я, конечно, разбирать не буду, с ним все ясно. Лучше попробую на вкус что-нибудь новенькое.

В планах:

- CSS модули
- Styled Components
- React JSS
- Radium
- React Shadow
- JSX Style

И на закуску - утилитарные CSS-фреймворки, с которыми уже давно хочется познакомиться.

#стили

CSS Модули

CSS модуль — это CSS файл, в котором все имена классов и анимаций имеют локальную область видимости по умолчанию.

То есть мы можем создать файл user-card.css и файл product-card.css. В каждом из этих файлов определить одинаковые классы .header, .footer, .content, .img. И при использовании в HTML стили этих классов не будут ломать друг друга, потому что они будут работать в разных контекстах - внутри карточки юзера или внутри карточки продукта. Как бы БЭМ, но без ужасно длинных имен и разного рода префиксов.

Но чтобы эта магия работала, CSS нужно обрабатывать с помощью JS, то есть включить его в сборку проекта. Вряд ли это кажется чем-то ужасным, ведь мы и так обрабатываем CSS, например, для добавления вендорных префиксов. Просто нужно обработать чуть сильнее :)

Настроив сборку определенным образом, мы сможем импортировать стили из CSS-файла как объект. При этом каждому классу, который мы определили (.header, .footer и т.д.) в этом объекте будет соответствовать уникальная строка (как БЭМ, но сгенерированная программой и совершенно точно уникальная). Именно эту строку мы и будем использовать в качестве класса.

На гитхабе нашелся профиль css-modules, будем посмотреть.

#стили

​Работа с CSS Modules в React-приложении

Пробуем использовать CSS-модули.

Для начала создаем новый проект React (с помощью утилиты create-react-app). Ничего особенного, всего один компонент PokemonCard. У этого компонента есть собственный файл стилей, подключенный обычным импортом (import style.css).

Если попробовать импортировать из этого файла стили в виде объекта, как обещались мне статьи по CSS-модулям, то ничего не получится (в консоль выводится пустой объект, созданных CSS-классов там нет).

Посмотреть:
https://codesandbox.io/s/css-modules-start-react-junior-264oh?file=/src/components/PokemonCard/index.js:0-56

Нужно ли что-то настраивать? Нет, не нужно.

create-react-app из коробки поддерживает использование CSS модулей. Для этого просто нужно добавлять к css-файлам суффикс module. То есть вместо style.css должно быть style.module.css.

Посмотреть:
https://codesandbox.io/s/css-modules-1-react-junior-uhdec?file=/src/components/PokemonCard/index.js:0-63

Теперь в консоль выводится объект формата:

{
  card: "_src_components_PokemonCard_style_module__card",
  cardImg: "_src_components_PokemonCard_style_module__cardImg",
  cardHeader: "_src_components_PokemonCard_style_module__cardHeader",
  cardData: "_src_components_PokemonCard_style_module__cardData",
  cardFooter: "_src_components_PokemonCard_style_module__cardFooter,
}

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

className="cardImg"

превращается в

className={styles.cardImg}

Оказалось, что все очень просто и даже не нужно ничего настраивать.

Если все же хочется копнуть поглубже или использовать модули вне create-react-app, то вся магия заключена в css-loader для webpack. У него есть опция modules, которую просто нужно включить.

#стили #примерыкода

​#важно #стили

В CSS-файле классы объявлены в camelCase, а не через дефис, как обычно. Это не обязательно, но так удобнее доставать их из импортированного объекта стилей. Имя класса становится свойством этого объекта, а к свойствам с дефисом в имени приходится обращаться через квадратные скобки.

​Изолированность CSS-модулей

Демонстрация изолированности модулей друг от друга:

https://codesandbox.io/s/css-modules-2-react-junior-z002o?file=/src/App.js

В приложении есть два компонента - ProductCard и UserCard. В их файлах стилей объявлены абсолютно одинаковые классы - .card, .title, .description, .img.

Но так как мы заменяем эти классы на уникальные строки, никаких конфликтов стилей не происходит.

#стили #примерыкода

CSS-модули + препроцессоры

CSS-модули можно сочетать с CSS-препроцессорами.

В create-react-app для этого могут понадобиться дополнительные настройки. Например, чтобы использовать SCSS, пришлось установить пакет node-sass, но дальше все пошло как по маслу - достаточно было поменять расширение файла.

#стили

Примеси в CSS-модулях

В CSS-модулях даже есть примеси (композиция классов). Один класс можно включить в другой с помощью свойства composes.

Смотреть:
https://codesandbox.io/s/css-modules-3-react-junior-mxojc?file=/src/styles.module.css

Есть два блока - .block1 и .block2 со своими стилями, а также класс .redBorder, который добавляет красную рамку. Добавляем рамку каждому блоку:

.redBorder {
  border: 5px solid red;
}

.block1 {
  composes: redBorder;
  width: 600px;
}

.block2 {
  composes: redBorder;
  width: 300px;
}

Можно даже примешивать классы из других файлов с помощью ключевого слова from:

composes: className from "./style.css";

К сожалению, codesandbox не хочет это демонстрировать.

#стили #примерыкода

Итак, CSS-модули оказались очень простой и скучной вещью, поэтому завязываем с ними.

Подведя итог: модули - это неплохо, но не то, чтобы прям прорыв.

Из недостатков: требуются настройки для работы с ними, дополнительная сборка (интересно, это достаточно эффективно?) и конечный DOM получается довольно сложным из-за уникальных имен, но БЭМ тоже здорово перегружает верстку.

Из достоинств: исходный код становится проще, хотя ничто не помешает его снова усложнить, если руки достаточно кривые. Еще есть примеси.

#стили