Svelte 애플리케이션의 Jest 구성

Svelte.js는 점점 더 많이 채워지는 프레임워크입니다. 제작자 Rich Harris에 따르면 곧 프런트 엔드 개발에서 가장 많이 사용되는 프레임워크가 될 것입니다.
최근에 저는 날씬한 애플리케이션을 만들었고 Jest로 테스트하고 싶습니다. Jest를 올바르게 구성하는 것은 그리 쉽지 않았기 때문에 내가 그것을 어떻게 수정하는지 보여주고 싶습니다.

내 svelte 프로젝트를 시작하기 위해 다음 명령을 사용했습니다.
npx degit sveltejs/template my-svelte-projec
cd my-svelte-project
npm install
npm run dev
그래서 저는 다음과 같은 프로젝트를 가졌습니다.



이제 모든 테스트 Jest 및 테스트 라이브러리와 DOM fr 테스트 라이브러리를 설치할 준비가 되었습니다.
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가 설치되면 package.json에서 jest를 구성할 차례입니다.

"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
package.json에서 jest 구성을 업데이트합니다.

"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>

이제 테스트는 녹색입니다.



svelte에서 jest를 구성하는 데 도움이 되기를 바랍니다.