Модульное тестирование вашего приложения Angular в браузере требует времени, и если вы не хотите иметь дело с PhantomJS или Chrome Headless, то Jest - это то, что вам нужно. необходимость.

ЧТО ТАКОЕ ШТУТКА?

Согласно его веб-сайту,

Jest - это восхитительный фреймворк для тестирования JavaScript, ориентированный на простоту.

Он работает с проектами, использующими: Babel, TypeScript, Node, React, Angular, Vue и другие!

Да, Facebook. Jest - это среда тестирования, разработанная Facebook. Он не запускается в браузере и вместо этого использует jsdom. Он нацелен на нулевую конфигурацию, хотя это утверждение применимо только для тестирования приложений React.

ПОЧЕМУ СЛЕДУЕТ УБЕЖАТЬ ОТ KARMA JASMINE?

Из-за популярной поговорки, которая звучит примерно так:

Карма - сука.

Шутки в сторону. Каждому свое. Мне нравятся мои тесты, не зависящие от браузера. Даже если он безголовый.

ОК, НО ПОЧЕМУ ШТУТ?

По следующим причинам:

  • Тесты не запускаются в браузере, даже без головы - они запускаются в виртуальной DOM (с использованием jsdom) - и это делает его невероятно быстрым.
  • Поскольку при использовании jsdom практически отсутствуют накладные расходы или какие-либо ограничения, тесты выполняются параллельно.
  • Jest также сначала выполняет неудавшиеся тесты, поэтому вы не
  • Jest представляет функцию Snapshot Testing для написания серьезных тестов, которые помогут вам избежать написания громоздких процедур настройки тестов.

УБЕЖДЕНЫ? ЗДЕСЬ КАК ЭТО СДЕЛАТЬ

Вот что мне нужно, чтобы вы установили на свой компьютер:

  • Node.js (используйте LTS, если не любите приключения - я использовал 10.x).
  • Angular CLI (подойдет последняя версия - я использовал v7.x).

Вот шаги, которые вам нужно выполнить, когда вы готовы:

  • Создайте новый проект angular-cli со следующим:
ng new jest-test
  • Удалите все зависимости для Karma и Jasmine, выполнив следующую команду в корне вашего проекта:
npm uninstall @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter --save-dev
  • Удалите karma.conf.js и test.ts из папки проекта.
  • Затем мы модифицируем наш файл tsconfig.spec.json, чтобы он выглядел так:
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
"module":"commonjs",
    "types": [
      "node",
      "jest",
      "jsdom"
    ]
  },
  "files": [
    "polyfills.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}
  • Теперь мы установим пакеты, необходимые для запуска ваших существующих тестовых случаев с Jest, используя:
npm install --save-dev jest jest-createspyobj jest-preset-angular babel-preset-env @types/jest @types/jsdom
  • Теперь, когда пакеты установлены, нам нужно обновить наши сценарии npm в package.json, чтобы мы могли запускать наши тестовые примеры. Обновите тестовые сценарии следующим образом:
"test": "jest",
"test:watch": "jest --watch",
"test:ci": "jest -ci --runInBand",
"test:coverage": "jest --coverage",
  • Теперь мы добавляем определение Jest в наш package.json. Вставьте в основание своего package.json следующее:
"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupJest.ts"
    ]
  }
  • На предыдущем шаге мы упоминали, что Jest необходимо выбрать файл setupJest.ts, который мы теперь создадим в нашем каталоге src со следующим содержанием:
import 'jest-preset-angular';
import './jestGlobalMocks.ts';
  • Теперь нам нужно создать файл jestGlobalMocks.ts на том же уровне, что и наш setupJest.ts, со следующим содержанием:
global['CSS'] = null;
const mock = () => {
  let storage = {};
  return {
    getItem: key => key in storage ? storage[key] : null,
    setItem: (key, value) => storage[key] = value || '',
    removeItem: key => delete storage[key],
    clear: () => storage = {},
  };
};
Object.defineProperty(window, 'localStorage', {value: mock()});
Object.defineProperty(window, 'sessionStorage', {value: mock()});
Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});
/**
 * ISSUE: https://github.com/angular/material2/issues/7101
 * Workaround for JSDOM missing transform property
 */
Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});
  • Создайте файл .babelrc в корне вашего проекта со следующим содержимым:
{
  "presets": ["env"]
}
  • Выполните следующую команду в корне вашего проекта и посмотрите, как ваши тестовые примеры выполняются без необходимости в браузере:
npm run test

ПРИМЕЧАНИЕ. Помните, что, поскольку Jest не запускается в браузере, у нас нет доступа к таким вещам, как localStorage, поэтому мы имитируем это в нашем файле jestGlobalMocks.ts. Jest также не имеет доступного метода createSpyObject, такого как jasmine, поэтому мы используем сторонний пакет [т.е. jest-createdpyobject], чтобы мы могли его использовать.

ЗАКЛЮЧЕНИЕ

Хотя Jest не работает в браузере и имеет несколько ограничений, их довольно легко преодолеть. Jest - это мощный инструмент для модульного тестирования, который помогает разработчикам по всему миру ПОВТОРНО СДЕЛАЙТЕ ЕДИНИЧНОЕ ТЕСТИРОВАНИЕ.

Статьи по теме:

Эта статья основана на руководстве Андерса Скарби по переходу с Karma и Jasmine на Jest для приложений Angular. Вы можете найти другие ссылки для получения дополнительной информации ниже:

Если вам понравилась эта статья и вы хотите больше подобных статей, оставляйте комментарии и аплодисменты в знак признательности.