Конфигурация Jest в приложении Svelte

Svelte.js – это фреймворк, который становится все более популярным. Если верить его создателю Ричу Харрису, то скоро он станет самым популярным фреймворком в области front-end разработки.
Недавно я создал приложение на svelte и хотел протестировать его с помощью Jest. Правильно настроить Jest оказалось не так просто, поэтому я хотел бы показать, как я это сделал.

Для запуска моего проекта svelte я использовал эту команду lignes:

npx degit sveltejs/template my-svelte-projec cd my-svelte-project npm install npm run dev

Таким образом, у меня получился вот такой проект:

Теперь все было готово для установки тестов Jest и Testing Library и DOM fr Testing Library:

npm install --save-dev jest @testing-library/svelte @testing-library/user-event @testing-library/dom

В моем package.json я проверил, все ли хорошо установлено:

и я написал новый скрипт для выполнения тестов в package.json:

Когда я выполнил этот скрипт, я увидел следующее:

Это потому, что у меня еще нет ни одного тестового файла.

Я решил протестировать App.svelte, если при его выполнении в браузере появится текст “Hello word”. Поэтому я создал файл App.spec.js, в котором первый тест выглядит следующим образом:

import App from "./App.svelte
import { render, screen } from "@testing-library/svelte";


it("has Hello header", () =>{
  render(App);
  const header = screen.getAllByText("Hello word!");
  expect(header).toBeTruthy()
});

Войти в полноэкранный режим Выйти из полноэкранного режима

Когда я выполнил тест, у меня возникла эта ошибка:

Это потому, что Jest не может правильно прочитать App.svelte, поэтому для его корректного импорта мне нужен пакет, который преобразует этот файл в нечто более удобное для jest:

npm install svelte-jester -D

Когда svelte-jester установлен, пришло время настроить jest в package.json:

"jest":{
    "transform": {
      "^.+\.svelte$": "svelte-jester"
    }
  }

Войти в полноэкранный режим Выйти из полноэкранного режима

Однако ошибка все еще существует, потому что файл App.spec.js написан с синтаксисом ES6, а Jest не распознает этот синтаксис автоматически, поэтому нам нужны другие пакеты для правильной настройки Jest:

npm i -D babel-jest @babel/preset-env

Итак, мне нужно завершить конфигурацию jest

"jest": {
    "transform": {
      "^.+\.svelte$": "svelte-jester",
      "^.+\.js$": "babel-jest"
    }
  }

Войти в полноэкранный режим Выйти из полноэкранного режима

Но этого недостаточно. Необходимо также сконфигурировать babel. Поэтому я создал новый файл babel.config.js и написал этот код:

module.exports = { presets: [["@babel/preset-env", { targets: { node: "current" } }]],  
};

Войти в полноэкранный режим Выйти из полноэкранного режима

Но у меня все равно возникла ошибка. На этот раз это неправильное тестовое окружение:

Поэтому мне нужно установить еще один пакет:

npm i -D jest-environment-jsdom

и обновить конфигурацию jest в package.json:

"jest": {
    "transform": {
      "^.+\.svelte$": "svelte-jester",
      "^.+\.js$": "babel-jest"
    },
    "testEnvironment": "jsdom"
  }

Войти в полноэкранный режим Выйти из полноэкранного режима

Но также App.spec.js:

/**
 * @jest-environment jsdom
 */


import App from "./App.svelte"
import { render, screen } from "@testing-library/svelte";


it("has Hello header", () =>{
  render(App);
  const header = screen.getAllByText("Hello word!");
  expect(header).toBeTruthy()
})

Войти в полноэкранный режим Выйти из полноэкранного режима

На этот раз все готово к использованию тестов:

Все работает очень хорошо, но необходимо обновить App.svelte:

<main>
    <h1>Hello word!</h1>
</main>

Войти в полноэкранный режим Выйти из полноэкранного режима

И теперь тест зеленый:

Надеюсь, что это поможет вам настроить jest в svelte.

Конфигурация Jest в приложении Svelte

Рекомендуем почитать: