Это небольшое руководство / объяснение предназначено для людей вроде меня, которые хотели отлаживать тесты Typescript Jest с поддержкой точек останова и всем остальным. Очень полезно для тестирования вашего приложения на ходу, особенно если вы используете TDD или просто хотите тестировать свой код на ходу.

Если вы ищете, как это сделать в Visual Studio Code, вам могут быть полезны эти две статьи:

К счастью, настройка и отладка Jest и Typescript в Webstorm проще. Если вы хотите просто посмотреть на готовую настройку, загляните в мой репозиторий. В демонстрационном репозитории есть тесты Jest как для простого приложения Express (протестировано с помощью супертеста), так и для простого приложения React (протестировано с помощью Enzyme).

Важные вещи для работы Typescript и Jest:

  • Использование пакета ts-jest для автоматического преобразования файлов .ts в файлы, понятные Jest. Это может быть достигнуто с помощью следующей конфигурации в конфигурации Jest:
"transform": {
  "^.+\\.(ts|tsx)$": "ts-jest"
}
  • Чтобы получить надлежащую поддержку по таким ключевым словам, как describe и test, не забудьте установить пакет @types/jest.
  • Чтобы убедиться, что точки останова работают должным образом, убедитесь, что у вас есть "sourceMap": true в файле tsconfig.json. Файл tsconfig должен находиться в корневом каталоге проекта, поскольку именно из него обычно запускается Jest.

Почти готово! Все, что осталось сделать, это добавить конфигурацию запуска в WebStorm в правом верхнем углу или в Выполнить - ›Изменить конфигурации, а затем просто добавить шаблон Jest с помощью символа плюса.

Теперь у вас должна быть задача «Выполнить», как на этом изображении слева.

Если вы когда-либо занимались отладкой кода Java или .NET, это будет вам хорошо знакомо.

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

Просто как тот! Не стесняйтесь задавать мне любые вопросы о настройке. Для получения подробной информации о том, как настроить и использовать отладчик Webstorm, см. Официальную документацию.