Создайте комплексное тестовое покрытие для своего кода TS с помощью этого простого руководства по программированию.
Эта статья о том, как вы можете покрыть свой код тестами и запустить их на сервере и в браузере. Создадим библиотеку и покроем ее тестами. Прежде чем мы начнем, давайте рассмотрим некоторые основы.
Тестирование программного обеспечения является квинтэссенцией практики разработки программного обеспечения. Часто тесты, требующие много времени (например, регрессионное тестирование), выполняются с помощью автоматических тестов. Таким образом, усилия инженера-программиста могут быть направлены на более важные задачи. А в сегменте автоматизированного тестирования есть модульные тесты (тщательно изучающие мельчайшие тестируемые части приложения), интеграционные тесты (обеспечивающие объединение и тестирование отдельных модулей в группе) и системные тесты (тестирование системы в целом). В TypeScript (TS) у нас есть множество сред тестирования для разработки и документирования наших тестовых случаев, чтобы убедиться, что наш код правильно покрыт. Одним из самых популярных фреймворков является Jest. который по умолчанию только для сервера. Однако часто этого недостаточно, как в случае, когда вам нужно построить тестовое покрытие в разных браузерных средах. В таких случаях разработчикам может потребоваться ноу-хау для интегрированного использования различных фреймворков для компиляции всестороннего охвата своего кода.
Начнем 👇
Давайте представим, что мы разрабатываем библиотеку на TypeScript, которая должна работать и в браузере, и на сервере.
Конечно, мы покроем наш код тестами. В нашем примере мы будем использовать Jest, одну из самых популярных сред тестирования. Однако, чтобы избежать написания тестов отдельно для браузера и сервера, мы можем использовать фреймворк, который может запускать одни и те же тесты для обоих экземпляров одновременно. Один из вариантов — Карма.
Сначала напишем псевдобиблиотеку, которую покроем тестами. Думаю, сейчас актуальнее писать на TypeScript, поэтому библиотеку будем писать на нем.
Наша библиотека подключается через WebSockets к серверу. Поэтому необходимо сделать тестовый сервер WebSocket.
Полный код на Github
Давайте напишем несколько тестов, используя фреймворк Jest и TypeScript. Давайте сначала установим его.
yarn add @types/jest jest jest-extended
Затем добавьте несколько интеграционных тестов.
Давайте попробуем запустить наш код.
jest — config=./test/jest.config.js
Отлично! Тесты работают. Но эти тесты выполняются на сервере. Запустим те же тесты из браузера, а еще лучше из нескольких браузеров. Для этого установите Карму:
yarn add Karma -D
Карма имеет множество расширений. В нашем случае нам нужно будет установить некоторые из них.
Поскольку Karma не поддерживает Jest по умолчанию, мы будем использовать более похожую на Jest библиотеку тестирования — Jasmine. Поэтому установите сам фреймворк Jasmine.
yarn add jasmine -D
Нам нужно добавить виртуальные модули браузера для запуска тестов в браузерах.
yarn add karma-chrome-launcher karma-firefox-launcher -D
Модули для компиляции кода.
yarn add karma-webpack ts-jest ts-loader webpack -D
Добавьте файл karma.config.js. В этом файле мы можем настроить Karma, указать какие файлы запускать, как компилировать код и многое другое. Подробнее о каждом пункте настройки — здесь.
Итак в настройках мы указали:
- какие файлы у нас есть в качестве тестов;
- какие настройки для компиляции TypeScript;
- и какая папка.
Чтобы научить Карму поддерживать методы Шутки, воспользуемся этим приемом. Создадим файл karma.setup.js следующего содержания:
Кроме того, я добавил поддержку относительно новой функции javascript: setImmediate.
global.setImmediate = global.setImmediate || ((fn, …args) => global.setTimeout(fn, 0, …args)); window.setImmediate = global.setImmediate;
Добавьте вызов этого файла в препроцессоры перед вызовом основного скрипта и в файлы для инициализации дополнительных методов и функций.
Пытаюсь бежать.
karma start karma.config.js
Заключение
Поскольку Karma не поддерживает Jest «из коробки», мы должны найти обходной путь. Сегодня мы рассмотрели один из этих обходных путей, показав вам, как настроить Karma с помощью Jest и TypeScript.
Какие инструменты вы используете для тестирования в браузере и на сервере? Дайте нам знать в комментариях 👇
Полный код этого эксперимента вы можете найти здесь.
О цепочке безопасности
ChainSafe — ведущая компания, занимающаяся исследованиями и разработками в области блокчейна, специализирующаяся на инфраструктурных решениях для децентрализованной сети. Наряду с клиентскими реализациями для Ethereum, Polkadot, Filecoin и Mina мы создаем портфель продуктов web3 — Файлы, Хранилище, web3.unity и другие. Как часть нашей миссии по созданию инновационных продуктов для пользователей и лучших инструментов для разработчиков, ChainSafe воплощает дух открытого исходного кода и ориентирован на сообщество. Чтобы узнать больше, нажмите сюда".
