Давайте начнем!
По умолчанию Angular использует jasmine и karma для модульного тестирования. Здесь мы попытались интегрировать jest с проектом angular для легкого модульного тестирования.
1. Управление зависимостями
- Во-первых, удалите все devDependencies, связанные с кармой. Вы можете использовать приведенную ниже команду для удаления этих devDependencies.
npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter
- Затем установите связанные с шуткой devDependencies, как показано ниже.
npm install jest @types/jest jest-junit jest-preset-angular ts-jest — save-dev
2. Удалите и обновите jsons
- Удалить тестовый объект из angular.json
- Обновите раздел сценариев в package.json, как показано ниже.
3. Удалите и обновите файлы конфигурации
- Удалить karma.conf.js с корневого уровня проекта
- Создайте и обновите jest.config.js на корневом уровне проекта.
- Удалите test.ts из каталога src
- Создайте и обновите файл setupJest.ts в каталоге src.
4. Удалите и обновите tsconfig jsons
- Обновите tsconfig.json, как показано ниже.
- Обновите tsconfig.spec.json, как показано ниже.
4. Запустите и проверьте модульное тестирование
- Запустите приведенный ниже скрипт в терминале, чтобы проверить
запустить тест npm
- Запустите приведенный ниже скрипт, чтобы проверить ваши изменения в режиме просмотра.
Тест запуска npm: смотреть
- Запустите приведенный ниже скрипт, чтобы увидеть охват отдельного компонента, а также всего приложения.
Тест запуска npm: покрытие
Примечание. На корневом уровне проекта будет создан каталог покрытия, и если мы откроем index.html в браузере, мы увидим покрытие кода всего приложения. (Путь: jest-ng-seed/coverage/jest-ng-seed/lcov-report/index.html)
Найдите приведенную ниже ссылку GitHub для приведенных выше фрагментов кода и начального проекта под названием jest-ng-seed.
Краткое содержание
Мы подробно изучили интеграцию jest с Angular 12 с одним исходным проектом под названием jest-ng-seed.
Удачного кодирования!!
