Тестовое задание на Angular. Настройка Unit тестирования с помощью Jest

В данной статье добавим тестовый фреймворк Jest для unit тестирования в замену стандартному — Karma.

Прежде чем начнем разрабатывать приложение, настроим тестовый framework. В Angular используется karma по умолчанию, но в последнее время jest набирает популярность.

Добавим поддержку Jest:

yarn add -D jest jest-preset-angular ts-jest @types/jest @angular-builders/jest jasmine-core jasmine jasmine-spec-reporter

В папке src создадим test-setup.ts:

import 'jest-preset-angular/setup-jest';

А также добавим jest.config.js в корне проекта:

И добавим соответствующие билдеры для jest в angular.json:

Удалим ненужные зависимости:

yarn remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

И файлы конфигов test.ts и karma.conf.js.

rm ./karma.conf.js ./src/test.ts

Запустим тесты:

ng test

Добавим еще пару настроек для Jest 27:

Для jest < 27

Можно запустить команду и убедиться, что все работает:

ng test

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Создание основного лейаута.

Предыдущая статья — Настройка локализации.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur