Jest에서 Vitest로 이동하는 이유

JavaScript 테스트를 위해 항상 Jest에 연락했지만 이제 다시 생각해 볼 때라고 생각합니다. 방금 Vitest 을(를) 발견했고 내 프로젝트 중 하나에서 사용해 봐야겠다고 생각했습니다. 2022년 테스트 러너처럼 느껴집니다. Jest가 수행하는 모든 작업과 Jest를 훌륭한 대안으로 만드는 몇 가지 추가 기능을 다룹니다.

UI가 있습니다!

Vitest는 브라우저에서 실행되는 UI와 함께 제공됩니다. 코드를 표시하고 호출console.log()을 인쇄할 수도 있습니다!

이것은 명령줄을 선호하는 사람들에게는 과도하게 보일 수 있지만 특정 테스트로 드릴다운하는 것과 같은 많은 편리한 기능을 제공합니다.

☝Run vitest --ui to run the test UI in the browser.

ES 모듈, TypeScript 등

Vitest는 구성 없이 ES 모듈, TypeScript, JSX, PostCSS, async-await 등과 같은 최신 기능을 지원합니다. ( docs )

대조적으로 이러한 것들을 Jest와 함께 사용하는 것은 종종 실망스러웠습니다. 가장 실용적인 방법은 use Babel Jest와 함께 JavaScript를 컴파일하고 make Jest ignore CSS files에 대한 해결 방법을 사용하는 것입니다.

Vitest를 사용하면 이러한 것들이 제대로 작동하는 것 같습니다.

import 'react' from React
import 'react-dom' from ReactDOM

it('works', () => {
  ReactDOM.render(<div>hello!</div>, document.body)
  expect(document.body.innerText).toBe('hello!')
})

☝ A test like this will require a Babel pipeline in Jest. In Vitest, it should work with the default config.

API는 Jest와 호환됩니다(대부분).

Vitest를 사용하면 Jest에서 최대한 쉽게 마이그레이션할 수 있습니다. 기본적으로 Jest 어설션을 지원합니다.

그것은 충분히 흥미로웠지만 Jest interop이 훨씬 더 발전하는 것을 보고 놀랐습니다. jest.useFakeTimers()와 같은 특수 함수는 vi.useFakeTimers()와 동일한 Vitest를 갖습니다.

/* Vitest */
const spy = vi.spyOn(obj, 'getApples').mockImplementation(() => apples)

/* Jest */
const spy = jest.spyOn(obj, 'getApples').mockImplementation(() => apples)

☝ Just change jest to vi.

Jsdom은 선택사항입니다.

Vitest는 Jsdom을 통한 브라우저 에뮬레이션도 지원합니다…

기본적으로 항상 Jsdom과 함께 실행되는 Jest와 달리 Jsdom은 Vitest에서 끌 수 있습니다. 실제로 어떤 환경을 에뮬레이트할지에 대한 옵션이 있습니다. v0.8부터 Vitest는 node , jsdom 및 happy-dom 를 지원합니다.

/**
 * @vitest-environment jsdom
 */

☝ Adding this to the top of a test file enables Jsdom.

글로벌 오염 없음

전역 컨텍스트(예: expect() , describe() 등)에 항목을 자동으로 드롭하는 Jest와 달리 Vitest는 모든 테스트 파일에서 항목을 가져와야 합니다. 타이핑이 좀 더 많을 수 있지만 더 명확하고 최소한의 놀라움 원칙을 따릅니다.

Jest에서 쉽게 마이그레이션할 수 있도록 자동으로 글로벌화하는 것도 가능합니다. ( docs )

import { expect, test } from 'vitest'

test("My test", () => {
  expect(2 + 2).toBe(4)
})

☝ The functions expect and test are explicitly imported before use.

병렬 테스트는 훌륭하게 작동합니다.

Vitest는 테스트를 병렬로 실행할 수 있으며 기능은 안정적입니다!

Jest는 test.concurrent 있지만 Jest가 존재하는 한 "실험적"으로 간주되었습니다. test.concurrent 의 Vitest 대응물은 안정적인 것으로 간주됩니다.

Vitest에는 다중 스레드 지원 기능이 내장되어 있으며 기본적으로 활성화되어 있습니다. ( docs )

/*
 * Vitest will attempt to run these tests
 * in parallel:
 */

test.concurrent('concurrent test 1', async() => {
  /* ... */

})
test.concurrent('concurrent test 2', async() => {
  /* ... */
})

읽어 주셔서 감사합니다!

내 게시물을 확인해 주셔서 감사합니다! 저는 오픈 소스와 JavaScript를 사랑하는 웹 개발자입니다. 이 게시물이 마음에 드셨다면 또는 !

Vitest