JestからVitestへ引っ越す理由

いつも手を伸ばしたJest JavaScriptテストのために、私はそれを再考する時間であると思います.ちょうど発見Vitest , そして、私が私のプロジェクトのうちの1つを試してみると思いました.それは2022年のテストランナーのように感じている-それはすべてのジェストをカバーするだけでなく、それは偉大な選択肢を作るいくつかの特典をカバーしています.

それはUIを持っている！

Viterestはブラウザで動作するUIを備えています.これは、コードを表示することができますも、プリントアウトconsole.log() 呼び出し!
これはコマンドラインを好む人にとっては過大に思えるかもしれませんが、特定のテストへのドリルダウンのような便利なことがたくさんあります.

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

ESモジュール、タイプスクリプトとより多く

ViterestはESモジュール、TypeScript、JSX、PostCSSのような近代的な機能をサポートし、asyncを待って、すべての設定なしで.( docs )
対照的に、これらのことをJestで動作させることは、しばしばイライラしていました.最も実用的な方法はuse Babel JavaScriptをコンパイルするJestと一緒に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互換(主に)

Voestは、できるだけ簡単に冗談から移行します.デフォルトではjestアサーションをサポートします.
それは十分に刺激的でした、しかし、冗談のinteropがさらに行くのを見て、私は驚きました.のような特殊関数jest.useFakeTimers() 匹敵するvi.useFakeTimers() .

/* 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はVATESTでオフにできます.実際には、エミュレートする環境のオプションがあります.v 0である.8、最も熱心な支持node , jsdom and happy-dom .

/**
 * @vitest-environment jsdom
 */

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

世界的汚染

自動的にグローバルコンテキストに物事を落とすジェストと異なります.expect() , describe() , 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.

パラレルテスト

Viterestは並列にテストを実行することができますし、機能は安定です!
冗談ながらtest.concurrent , それはジェストがされている限り、“実験的”と見なされている.ビーストの対応 test.concurrent 安定していると思われる.
Viterestはマルチスレッドサポートを内蔵し、デフォルトで有効になっています.( docs )

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

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

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

読書ありがとう！

私のポストをチェックアウトしてくれてありがとう!私はオープンソースとJavaScriptが大好きなWeb開発者です.あなたがこのポストが好きであるならば、考えてください!

Vitest