Vitest とは何ですか? なぜ Vitest を使用する必要があるのですか?

こんにちは、開発者の皆さん！ ? Vitest の世界に飛び込む準備はできていますか?テストが初めての場合、または他のテスト フレームワークを使用している場合でも、心配する必要はありません。私たちは一緒に Vitest を探索していきます。この記事が読み終わる頃には、きっとあなたもそれを試してみたくなるはずです!

ヴィテストとは何ですか？

Vitest はコードにとってのスーパーヒーローのようなものです。これは、Vite を利用した非常に高速な単体テスト フレームワークです。しかし、それはあなたにとって何を意味しますか?

?️ 速度: Vitest は信じられないほど高速です。つまり、待ち時間が減り、コーディングに多くの時間を費やすことができます。
? 簡単なセットアップ: Vite ですぐに使用できるため、非常に簡単に始めることができます。
? 監視モード: 変更を加えたときにテストを自動的に再実行できます。
? 優れた開発者エクスペリエンス: 楽しく使えるクリーンで直感的な API を備えています。

始めましょう!

あなたが新しいプロジェクトに取り組んでいると想像してください。いくつかの関数があり、それらが正しく動作していることを確認したいと考えています。ヴィテストに参加してください!

まず、Vitest をインストールしましょう:

npm install -D vitest

さて、テストする簡単な関数があるとします。

// math.js
export function add(a, b) {
  return a + b;
}

Vitest でこれをテストするにはどうすればよいですか?とても簡単です！テストファイルを作成しましょう:

// math.test.js
import { expect, test } from 'vitest'
import { add } from './math'

test('addition works', () => {
  expect(add(2, 2)).toBe(4)
})

わあ、それは簡単でしたね?細かく見てみましょう:

1. Vitest から Expect と Test をインポートします。
2. 追加関数をインポートします。
3. test 関数を使用してテストを作成します。
4. テスト内では、関数が正しく動作するかどうかを確認するために Expect を使用します。

テストの実行

テストを実行する準備はできましたか?これを package.json に追加するだけです:

{
  "scripts": {
    "test": "vitest"
  }
}

これで、次のコマンドを使用してテストを実行できるようになります。

npm run test

そして出来上がりです！テスト結果はターミナルに直接表示されます。 ?

レッツ・ゲット・ファンシー: ウォッチモード

しかし、待ってください、それだけではありません! Vitest には素晴らしいウォッチ モードがあります。これは、変更を加えるたびにコードをチェックしてくれるパーソナル アシスタントがいるようなものです。

監視モードを使用するには、次を実行するだけです:

npm run test -- --watch

ファイルを保存するたびに、Vitest は自動的にテストを再実行します。まるで魔法のようです！ ✨

質問タイム！

これをインタラクティブにしましょう。このテストが何をするかわかりますか?

test('multiply function', () => {
  expect(multiply(3, 4)).toBe(12)
})

少し考えてみてください...

準備はできましたか?このテストは、乗算関数をチェックして、3 と 4 を正しく乗算して 12 が得られることを確認しています。クールですね?

あなたの番です！

今度はあなたがテストを書く番です!次の関数があるとしましょう:

export function isEven(number) {
  return number % 2 === 0
}

この関数のテストを書いてもらえますか?試してみてください!

(ヒント: 偶数と奇数の両方をチェックするとよいでしょう)

まとめ

おめでとうございます!あなたは Vitest の世界への最初の一歩を踏み出したところです。 ?基本については説明しましたが、さらに詳しく調べる必要があります:

• 関数とモジュールのモック
• 非同期コードのテスト
• React や Vue などのお気に入りのフレームワークで Vitest を使用する

テストはバグを見つけることだけを目的とするものではないことを覚えておいてください。それは、より優れた、より信頼性の高いコードを書くことです。 Vitest を使用すると、実際に楽しいことができます!

それでは、次のプロジェクトで Vitest を試してみる準備はできていますか?信じてください、未来のあなたはあなたに感謝するでしょう！ ?

テストを楽しんでください! ?✨

以上がVitest とは何ですか? なぜ Vitest を使用する必要があるのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。