Настройка Jest для TypeScript

Для использования Jest с TypeScript необходимо установить несколько зависимостей. Для начала нужно установить сам Jest, а также дополнительные пакеты для работы с TypeScript и интеграции с Jest.

  1. Установка Jest:

    npm install --save-dev jest

  2. Установка TypeScript:

    npm install --save-dev typescript

  3. Установка пакетов для поддержки TypeScript в Jest:

    npm install --save-dev ts-jest @types/jest

  4. Если используете Babel, понадобится еще и пакет babel-jest:

    npm install --save-dev babel-jest @babel/preset-typescript

Конфигурация TypeScript

Для корректной работы Jest с TypeScript, необходимо правильно настроить конфигурацию TypeScript. Создайте или отредактируйте файл tsconfig.json в корне проекта, добавив следующие параметры:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

Настройка конфигурации Jest

Jest необходимо указать, как он будет работать с TypeScript. Это можно сделать с помощью ts-jest. Для этого создается конфигурационный файл Jest, например, jest.config.js, в котором указывается нужная настройка.

Пример конфигурации:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  coverageDirectory: 'coverage',
  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
  globals: {
    'ts-jest': {
      isolatedModules: true
    }
  }
};

Параметры конфигурации:

  • preset: 'ts-jest': указывает Jest использовать ts-jest как пресет для обработки TypeScript.
  • testEnvironment: 'node': задает среду выполнения тестов как Node.js.
  • transform: { '^.+\\.(ts|tsx)$': 'ts-jest' }: настраивает Jest для преобразования файлов с расширением .ts и .tsx с помощью ts-jest.
  • moduleFileExtensions: расширения файлов, которые будут распознаны Jest.
  • testMatch: шаблон для поиска тестов. В данном случае ищутся файлы с расширением .test.ts и .test.tsx.
  • globals: { 'ts-jest': { isolatedModules: true } }: эта настройка позволяет использовать ts-jest в режиме изолированных модулей для повышения производительности.

Проверка конфигурации

После настройки конфигурации можно выполнить тесты, чтобы убедиться, что Jest правильно работает с TypeScript. Для этого создайте файл теста, например, example.test.ts:

describe('Test Example', () => {
  it('should add two numbers correctly', () => {
    const sum = (a: number, b: number): number => a + b;
    expect(sum(2, 3)).toBe(5);
  });
});

После этого можно запустить Jest:

npx jest

Если конфигурация настроена правильно, Jest должен пройти тесты без ошибок.

Проблемы с типами и решение

При работе с TypeScript могут возникнуть ситуации, когда Jest не может правильно распознать типы. Чтобы избежать таких проблем, рекомендуется:

  • Убедиться, что все файлы, содержащие тесты, имеют правильные расширения .ts или .tsx.
  • Проверить, что все зависимости, такие как @types/jest и ts-jest, обновлены до последней версии.
  • Убедиться, что конфигурация tsconfig.json не включает в себя исключенные директории, такие как node_modules.

Если ошибка связана с типами, например, Jest не может найти типы для некоторых глобальных объектов, можно добавить в файл setupTests.ts или global.d.ts глобальную настройку типов:

import '@testing-library/jest-dom';

Этот файл нужно указать в конфигурации Jest в поле setupFilesAfterEnv:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

Применение Babel для обработки TypeScript

Если проект использует Babel для трансформации кода, то можно настроить Jest на использование babel-jest. В этом случае нужно установить дополнительный пакет для Babel:

npm install --save-dev @babel/preset-typescript

Далее добавляется конфигурация Babel в файл .babelrc или babel.config.js:

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

После этого Jest будет использовать Babel для обработки TypeScript файлов. В jest.config.js нужно указать, что Jest должен использовать babel-jest для трансформации файлов:

module.exports = {
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest'
  }
};

Этот подход позволяет использовать все возможности Babel, такие как полифилы и плагины для трансформации кода, в том числе TypeScript.

Тестирование с TypeScript и React

Для проектов на React с TypeScript нужно дополнительно установить пакет для тестирования React компонентов, если это необходимо:

npm install --save-dev @testing-library/react

Затем можно тестировать компоненты в TypeScript с использованием @testing-library/react. Пример простого теста для React-компонента:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders learn react link', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Выводы

Настройка Jest для работы с TypeScript является важным этапом при подготовке проекта к тестированию. Важно правильно установить зависимости, настроить конфигурацию TypeScript и Jest, а также учитывать особенности работы с React и Babel. Следуя этим рекомендациям, можно гарантировать стабильную работу тестов в TypeScript, что повысит качество и надежность кода.

Оглавление