## はじめに
Vitestは、JavaScriptフロントエンド開発のための高速なテストフレームワークです。学んだ内容をまとめていきます。

## Vitestの特徴

- **HMRによるテストの高速化:**
HMR（ホットモジュール交換)を使用しているため、開発効率を上げることができます。
HMRは、ソースコードの変更を検出し、関連するテストだけを即座に実行できるため、変更による影響をすぐに把握できます。
開発しながら、テストも一緒に書いている場合に、とても便利ですね。

- **Jestとの互換性がある:**
VitestはJestと互換性があり、Jestの影響を受けています。
既存のプロジェクトでも採用しやすいです。

- **Viteとの統合:**
Vitestは、高速なビルドツールであるViteをベースにしています。
ViteはJavaScriptの依存関係を事前にバンドルし、実行時の処理を最小限に抑えて高速化を図っています。
ちなみに、Viteを使っていないプロジェクトでも、Vitestは使用できます。

## インストール

まずは、vitestをインストール

![img](/mosaic-code.jpg)

インストールしたら、vite.config.tsファイルを以下のように編集する。

![img](/mosaic-code.jpg)
VSCodeを使用している人は、以下の「Vitest」という拡張機能を入れれば便利です。
![スクリーンショット 2024-03-14 22.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c25796bc-a194-45d2-24ae-9f52e94c9496.png)


## 簡単なテストを書いてみよう
それでは、簡単なテストを書いていきます。
「sum.ts」ファイルと「sum.test.ts」ファイルを書いていきます。
Jestと同様に、[ファイル名].test.tsのようなファイル名にすれば、自動的にテストファイルとみなしてくれます。
![img](/mosaic-code.jpg)
![img](/mosaic-code.jpg)

こちらをテストしてきましょう。
VSCodeのサイドバーにある「テスト」ボタンをクリックします。

![スクリーンショット 2024-03-20 10.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/ef9bf953-c837-dc92-0fee-e016851b7994.png)

すると、作成したテストケースが一覧で表示されており、テストしたい項目を選ぶことができます。
![スクリーンショット 2024-03-20 10.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0a722342-f942-5f4a-5a31-244194f2bb70.png)

テストを実行してみましょう。
成功すると、以下のように表示されます。
![スクリーンショット 2024-03-20 10.07.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/871fe187-083d-02a6-02a0-b5cf00a7d894.png)

コードを以下のようにして、テストが失敗するようにしてみましょう。

![img](/mosaic-code.jpg)
テスト実行してみましょう。
失敗すると、エラーの原因などが赤く表示されます。

![スクリーンショット 2024-03-20 10.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/cca476c0-415a-2f41-f147-a5c5059dc871.png)


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

## はじめに
Vitestは、JavaScriptフロントエンド開発のための高速なテストフレームワークです。学んだ内容をまとめていきます。

## Vitestの特徴

- **HMRによるテストの高速化:**
HMR（ホットモジュール交換)を使用しているため、開発効率を上げることができます。
HMRは、ソースコードの変更を検出し、関連するテストだけを即座に実行できるため、変更による影響をすぐに把握できます。
開発しながら、テストも一緒に書いている場合に、とても便利ですね。

- **Jestとの互換性がある:**
VitestはJestと互換性があり、Jestの影響を受けています。
既存のプロジェクトでも採用しやすいです。

- **Viteとの統合:**
Vitestは、高速なビルドツールであるViteをベースにしています。
ViteはJavaScriptの依存関係を事前にバンドルし、実行時の処理を最小限に抑えて高速化を図っています。
ちなみに、Viteを使っていないプロジェクトでも、Vitestは使用できます。

## インストール

まずは、vitestをインストール

```
npm install -D vitest
```

インストールしたら、vite.config.tsファイルを以下のように編集する。

```vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
  },
});

```
VSCodeを使用している人は、以下の「Vitest」という拡張機能を入れれば便利です。
![スクリーンショット 2024-03-14 22.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/c25796bc-a194-45d2-24ae-9f52e94c9496.png)


## 簡単なテストを書いてみよう
それでは、簡単なテストを書いていきます。
「sum.ts」ファイルと「sum.test.ts」ファイルを書いていきます。
Jestと同様に、[ファイル名].test.tsのようなファイル名にすれば、自動的にテストファイルとみなしてくれます。
```sum.ts
export function sum(a: number, b: number) {
  return a + b;
}
```
```sum.test.ts
import { expect, test } from "vitest";
import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});
```

こちらをテストしてきましょう。
VSCodeのサイドバーにある「テスト」ボタンをクリックします。

![スクリーンショット 2024-03-20 10.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/ef9bf953-c837-dc92-0fee-e016851b7994.png)

すると、作成したテストケースが一覧で表示されており、テストしたい項目を選ぶことができます。
![スクリーンショット 2024-03-20 10.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/0a722342-f942-5f4a-5a31-244194f2bb70.png)

テストを実行してみましょう。
成功すると、以下のように表示されます。
![スクリーンショット 2024-03-20 10.07.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/871fe187-083d-02a6-02a0-b5cf00a7d894.png)

コードを以下のようにして、テストが失敗するようにしてみましょう。

```sum.test.ts
import { expect, test } from "vitest";
import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(5);
});
```
テスト実行してみましょう。
失敗すると、エラーの原因などが赤く表示されます。

![スクリーンショット 2024-03-20 10.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/cca476c0-415a-2f41-f147-a5c5059dc871.png)


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

Vitestの特徴

続きを読むには単価診断を受けてください 30秒