Jest тестирование ESM

При тестировании js через Jest с использованием import может возникнуть ошибка:

SyntaxError: Cannot use import statement outside a module

Сейчас разберемся, как эту ошибку исправить.

Настройка проекта

Для примера инициализируем новый проект и добавляем в dev зависимости jest:

yarn add -D jest

Структура получится следующая:

├── js
│   ├── hello.js
│   └── hello.test.js
└── package.json

В папке js добавим два файла:

  • hello.js - js файл в котором находятся функция для тестирования
  • hello.test.js - js файл для тестирования hello.js

hello.js будет содержать следующее:

function sum(a, b) {
    return a + b
}

export { sum }

hello.test.js будет содержать следующее:

import { sum } from "./hello"

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

В package.json добавим скрипт для запуска jest

{
    ...
    "scripts": {
        "test": "jest"
    },
    ...
}

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

Добавляем поддержку import для Jest

В список dev зависимостей добавляем @babel/core, @babel/preset-env и babel-jest(если они еще ранее в ваш проект небыли добавлены):

yarn add -D @babel/core @babel/preset-env babel-jest

Затем добавляем в корень проекта файл .babelrc. Теперь структура проекта будет выглядит так:

├── js
│   ├── hello.js
│   └── hello.test.js
├── .babelrc
└── package.json

В .babelrc добавляем следующее:

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

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