Тестирование углового быстрее с шуткой

1. Встретить шутка 🃏
2. Кстати, я хочу, чтобы мои угловые тесты были быстрее !
3. Предостережения
4. Миграция из жасмина
5. Прощай браузер, наши тесты теперь запускаются в jsdom
6. Трассировка стека ошибочных ошибок в Zone.js
7. Интеграция IDE
8. Резюме

Примечание. В этой статье предполагается, что вы используете созданный Angular CLI v1.0 проект из Angular v4.0.0. Но это также работает на Angular v2.x с CLI в бета-версии.

Несмотря на то, что Angular является всеобъемлющей средой с множеством абстракций по умолчанию: например, custom JIT а также АОТ компиляторы, глубокие RxJS а также Zone.js интеграции, все еще возможно работать за пределами его панели инструментов. Интересно, что можно изменить бегунка теста по умолчанию. Этот пост расскажет вам, почему и как вы можете это сделать.

Если вы когда-нибудь чувствовали себя синим, уставшим, безнадежным во время запуска вашего медленного набора тестов для приложения Angular с Karma в вашем любимом браузере (и я не говорю о внедрении всех возможных компонентов в ваш тестовый файл), продолжайте читать.

Что если я скажу вам, что вы можете:

• запустить ваши угловые тесты без браузера
• запустить тестовый пакет в несколько раз быстрее
• перезапустить мгновенно только тесты, связанные с последними изменениями кода?

Встретить шутка 🃏

Шутка безболезненная платформа для тестирования JavaScript Если это не говорит о многом, возможно, вам пришлось потратить все свое свободное время на выполнение медленных тестов кармы 😅. Позвольте мне кратко представить это:

• Jest - это тестовая платформа, широко адаптированная многими крупные компании и быстро принят сообществом React.
• Сидит поверх жасмина, поэтому API практически идентичен.
• Имеет все это API документированный наряду с руководствами, примерами и полезным сообществом на форумах, таких как Reactiflux а также Переполнение стека ,
• Ориентирован на опыт разработчика (скорость и простота использования является приоритетом.)
• Предоставляет значимые сообщения об ошибках.
• Работает на серверах непрерывной интеграции без дополнительных инструментов (абстрагирование DOM с помощью jsdom библиотека.)
• Обеспечивает покрытие кода из коробки.
• Интегрируется с Babel и TypeScript без проблем.

И что самое важное, это то, что он обеспечивает умный, режим погружения часы , Режим наблюдения запускает только тесты, затронутые изменениями в git-файле - он также запускает сначала неудачные тесты и может создать первую ошибку, поэтому цикл обратной связи примерно в 10 раз быстрее, чем с Karma, в зависимости от размера набора тестов.

Кстати, я хочу, чтобы мои угловые тесты были быстрее !

Нам нужно установить необходимые зависимости (я использую пряжу , но если вам нравится npm , никаких проблем):

$ yarn add --dev jest jest-preset-angular @ types / jest

где:

• jest - платформа тестирования Jest
• jest-preset-angular - предустановка конфигурации с настройкой общих настроек для вас
• @ types / jest - набор шрифтов

Примечание: если вы используете npm v2 (который не выравнивает зависимости), вам также необходимо установить jest-zone-patch.

Вам нужно будет добавить эту запись в package.json :

"jest": {"preset": "jest-preset-angular", "setupTestFrameworkScriptFile": "<rootDir> /src/setupJest.ts"}

Скорее всего, это все настройки, которые вам понадобятся. Я извлек общие параметры конфигурации в Шутка-предварительно-угловой пакет, и он должен просто работать ™ для большинства случаев.

Примечание: настройки различаются, и вам может потребоваться адаптировать конфигурацию в соответствии с потребностями вашего приложения. Вы должны найти ПРОЧТИ МЕНЯ предустановки полезно. Также стоит отметить, что каждый параметр, установленный пресетом, может быть просто перезаписан.

Следующий шаг - создание setupJest.ts . Этот маленький парень, которого вы можете написать в TS, также обязательно поместите его в / src . Это выглядит так:

импорт 'jest-preset-angular'; import './jestGlobalMocks';

Вы можете видеть, что мы импортируем файл jestGlobalMocks.ts с исправлениями в наш оконный объект ( jsdom не имеет всего этого реализованного, поэтому нам иногда нужно его исправлять).

Пример:

const mock = () => {let storage = {}; вернуть {getItem: key => ключ в хранилище? хранилище [ключ]: ноль, setItem: (ключ, значение) => хранилище [ключ] = значение || '', removeItem: key => удалить хранилище [ключ], очистить: () => хранилище = {},}; };

Mocking localStorage является необязательным, но без mock getComputedStyle ваш тест не будет выполняться, так как Angular проверяет, в каком браузере он выполняется. Нам нужно подделать это.

Теперь вы готовы добавить это в свои скрипты npm:

"test": "jest", "test: watch": "jest --watch",

... и навсегда измените способ тестирования приложений Angular.

О, еще одна вещь. Забудьте об установке PhantomJS на свой CI:

"test: ci": "jest --runInBand",

Стоит отметить, что серверы CI обычно запускают ваш код на одном ядре, поэтому распараллеливание может замедлить ваши тесты. Если вы испытываете такое поведение, используйте флаг --runInBand, чтобы явно указать Jest, что вы хотите запускать тесты один за другим (точно так же, как Karma или Mocha).

Предостережения

Конечно, есть некоторые. Но на удивление не так много.

Миграция из жасмина

Нам нужно будет перенести некоторые звонки Жасмин в Jest. Большая часть API похожа, но есть небольшие отличия.

Ниже перечислены необходимые изменения, которые необходимо внести в вашу кодовую базу.

• jasmine.createSpyObj ('name', ['key']) -> jest.fn ({key: jest.fn ()})
• удалить модуль @ types / jasmine (дублировать объявления TS из @ types / jest )

После переноса jasmine.createSpyObj () вы можете вернуться позже, чтобы перенести остальные функции, которые не являются обязательными на момент написания (это может измениться в будущем):

• jasmine.createSpy ('name') -> jest.fn ()
• and.returnValue () -> mockReturnValue ()
• spyOn (...). and.callFake (() => {}) -> jest.spyOn (...). mockImplementation (() => {})
• Асимметричные сопоставления: jasmine.any, jasmine.objectContained и т. Д.

Прощай браузер, наши тесты теперь запускаются в jsdom

Вы также можете столкнуться с API, доступными в браузерах, но не в jsdom , такими как htmlElement.closest или window.localStorage (который мы только что высмеяли в jestGlobalMocks.ts ).

Трассировка стека ошибочных ошибок в Zone.js

Я не мог заставить Zone выводить более короткие и более значимые трассировки стека ошибок. В качестве обходного пути вы можете добавить Error.stackTraceLimit = 2 ; на ваш setupJest.ts или любой другой номер, который вам подходит . Я считаю это полезным для большинства случаев.

Интеграция IDE

Не забудьте также проверить эти удивительные расширения, чтобы еще больше упростить процесс тестирования:

Резюме

Я был очень удивлен, что на самом деле можно интегрировать сторонний инструмент тестирования, не работающий в браузере, например Jest, в Angular. Пару дней назад я все еще думал, что это будет невозможно сделать в разумные сроки, и это просто не стоит усилий, но оказалось, что оно того стоило.

Весь набор тестов нашего приложения из 35 файлов с ~ 100 тестами выполнялся в 2,5 раза быстрее, чем с Karma. Мы также можем использовать тестирование снимков , Что самое важное, теперь у нас есть мощный режим часов, мгновенно повторяющий тесты. И все это без необходимости компиляции приложения или запуска сервера разработки .

Так что если вы заботитесь о своем опыте тестирования, сделайте себе одолжение и проведите Angular тесты с Jest. Тебе это понравится.

И не забудьте пометить его на GitHub !

Если вы обнаружите проблемы с представленной настройкой или обнаружите ошибку, пожалуйста, сообщите об этом в Шутка-предварительно-угловой GitHub хранилище.

Похожие

Комментарии