20 ноября 2018: обновлено до Angular 7
Несколько месяцев назад я обнаружил Jest, тестирование моментальных снимков, наконец, простой способ протестировать мой html и получить хорошие отзывы в Angular. С первого момента я влюбился в этот новый способ тестирования. У меня была возможность добавить его в новый проект, над которым я только начинал работать. Кривая обучения проста, если вы пришли от Jasmine, почти с таким же синтаксисом, но более мощным.
Ловушка при использовании тестирования моментальных снимков заключается в том, что вы должны помнить, что вы должны тщательно анализировать свои неудачные html-снимки, а не просто принять изменения, сделанные здесь. Кроме того, рядом с тестированием ваших html-файлов вам также нужно проверить логику.
Помимо шутки, у вас есть еще один мощный инструмент для ускорения тестирования и работы на основе тестов: WallabyJs.
Возможность использования разделенных шаблонов html и CSS с templateUrl и styleUrls не работала с wallabyJs из коробки. Если вы хотите использовать встроенные шаблоны, проблем не возникнет. Ищу решение, но не нашел. Поэтому я решил потратить некоторое время и написать свою небольшую библиотеку, чтобы использовать вместе wallabyJs и Jest.
В моем примере ниже я буду использовать пряжу, так как я предпочитаю ее выше npm!
Как начать с этого
Удалите некоторые устаревшие зависимости, когда мы начнем использовать шутку «карма» и «жасмин» устарели. yarn remove karma karma-chrome-launcher karma-cli karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter @types/jasmine @types/jasminewd2
npm remove karma karma-chrome-launcher karma-cli karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter jasmine-core jasmine-spec-reporter @types/jasmine @types/jasminewd2
Настроить jest с покрытием кода
Теперь мы добавляем наши зависимости, чтобы шутка работала.
Прежде всего добавим шутку: yarn add @types/jest jest @angular-builders/jest --dev npm i @types/jest jest @angular-builders/jest -D
Поскольку покрытие кода важно, нам также необходимо опубликовать его где-нибудь в гидролокаторе yarn add istanbul-reports jest-sonar-reporter --dev npm i istanbul-reports jest-sonar-reporter -D
Мы можем добавить шутку в наш проект двумя разными способами. Первый способ - добавить всю нашу конфигурацию в package.json, второй - создать отдельный файл jest.config.js, который позволит нам легко поддерживать конфигурацию.
jest.config.js используется для нашей конфигурации jest. Здесь мы определяем покрытие кода, какие файлы необходимо включить в тест и т. Д.
moduleNameMapper - мощный инструмент для переназначения имен импорта. Вместо множества точек, таких как ../../../../common/common.module, вы можете использовать @common/common.module
src/setupJest.ts больше не требуется, поскольку мы расширяем модули узлов, где некоторые настройки предопределены!
Мы корректируем наш файл angular.json, чтобы сообщить angular, что мы используем jest в качестве тестового движка.
Настройте файл tsconfig.spec.json для вашего приложения angular, чтобы
Теперь мы добавляем тестовые команды в наш package.json, чтобы легко начать тестирование.
test: запустит наши тестовые команды
test: охват запустит тестовое покрытие
test: snapshot обновит все снимки в тестах. Если вы запускаете эту команду, убедитесь, что сейчас правильные снимки с ошибками
test: watch watch jest tests
Теперь шутка работает, и покрытие можно проверить в командной строке:
И в красивом отчете
Настроить интеграцию валлаби
Тесты рабочие и тоже сдающие результаты. Пришло время добавить валлаби.
yarn add ngx-wallaby-jest --dev
npm i ngx-wallaby-jest -D
Создайте файл wallaby.js со следующей конфигурацией.
Не нужно добавлять шаблон html, css, scss, less. Мы предварительно обработаем эти файлы перед запуском тестов! С ngxWallabyJest в этом компоненте конфигурации через плагин будет работать только компонент, используйте правильный шаблон!
Jest запускается на узле, а не в браузере, это также причина, по которой нам нужно имитировать некоторые функции.
Затем загрузите jest, чтобы использовать ваш jest.config.js
Теперь вы можете запустить валлаби из своей любимой среды разработки, и он будет работать так же, как и валлаби должен работать.
Заключение
Когда вы начинаете новый проект, думайте о шутке. И если у вас есть возможность использовать wallabyJs или купить для него лицензию, сделайте это. Это даст вам много преимуществ для ваших возможностей кодирования!
Полный код
Полный пример можно найти на https://github.com/bovandersteene/angular-cli-jest-wallaby
