Список тегов для более удобного поиска постов

👉 Основные понятия

#компоненты
#jsx
#жизненныйциклкомпонента
#виртуальныйdom
#состояние
#обработкасобытий
#потокданных
#ключи
#формы
#рефы
#hoc
#рендерпропсы
#контекст
#порталы
#хуки
#concurrentmode

👉 Управление состоянием

#управлениесостоянием
#redux
#mobx
#recoil

👉 Работа с ошибками

#обработкаошибок
#предохранители
#отладка
#проверкатипов
#typescript
#строгийрежим

👉 Оптимизация

#оптимизация
#profiler
#ленивыекомпоненты
#purecomponent

👉 Тестирование

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

👉 Серверный рендеринг

#серверныйрендеринг

👉 Стилизация

#стили
#styledcomponents
#jss
#radium
#shadowdom

👉 Распространенные задачи

#валидацияформ
#роутинг
#обменданными
#rtkquery

👉 Прочее

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

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.mock(moduleName, factory, options).

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

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

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

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

Интеграция styled-components с Jest

Подробнее в документации: https://styled-components.com/docs/tooling#jest-integration

Для тестирования стилизованных компонентов с помощью Jest есть специальный пакет jest-styled-components. Он улучшает тестирование снапшотами и предоставляет дополнительную проверку для стилей - toHaveStyleRule.

Для тестирования используем тестовый рендерер React.

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

Новые теги

#rtkquery
#обменданными

Полный список тегов: https://t.me/react_junior/84