vite+SWC vitest typescript の環境構築をしてみた

## 概要
「簡単にセットアップをして早く開発に入れるように」と考えて
誰でも最短でセットアップできるように書いています。
※TDDに対応した環境構築になります。

## 対象者
この記事は下記のような人を対象にしています。

- 駆け出しエンジニア
- プログラミング初学者
- 簡単に早くセットアップして検証したい方

## 背景や前提
私自身初めてセットアップする際にかなりの時間を用した覚えがある
また、自分自身の復習としてこの記事を書いています。

node.js,npmの準備はできている前提での記事になります。
ターミナルを中心にした操作になっています。
ターミナルは何を使っても問題ありません。
※デバイスやコードエディタでの差異が少なくて済むようにするためです。

:::note warn
警告
Node.jsのバージョン18+ または 20+が必要です。
バージョンによってはエラーが発生する可能性があります。
その際はバージョンを変えてみて下さい。
:::



### 今回使用するライブラリのドキュメント
- [vite](https://ja.vitejs.dev/guide/ "vite")
- [vitest](https://vitest.dev/ "vitest")
- [SWC](https://swc.rs/ "SWC")
- [TypeScript](https://www.typescriptlang.org/docs/ "TypeScript")

## 手順・方法
### projectの作成
1. ターミナルを開きcdコマンドを使用して自分がprojectを作りたい場所に移動
    ```ruby:bash
    cd ⚪︎⚪︎⚪︎⚪︎⚪︎
    ```
    <br>
1. viteのprojectを作成する
    ```ruby:bash
    npm create vite@latest
    ```
    <br>
1. Ok to proceed?と表示されたら「y」を入力しEnterを押す
    <br>

1. Project nameを入力し(デフォルトで問題なければそのまま)Enterを押す
    <br>

1. 十字キーを使用し「React」までカーソルを持って行きEnterを押す
    ![スクリーンショット 2024-09-05 22.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/2c5bbf55-a850-3a81-f38f-e91c8afc33c9.png)
    <br>

1. 十字キーを使用し「TypeScript + SWC」までカーソルを持って行きEnterを押す
    ![スクリーンショット 2024-09-05 22.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/5daadacf-2af7-0a05-777b-1e237327d888.png)
    <br>
1. 下記コマンドが表示されたらinstall完了
    ```ruby:bash
    cd vite-project ← Project nameで設定したものが表示される
    npm install
    npm run dev
    ```
    <br>
1. 先ほど表示されたコマンドの1つずつターミナルで実行しローカルホストを立ち上げる
    ![スクリーンショット 2024-09-06 0.41.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/34fdda5d-eb78-d342-86dd-ece06f7c369f.png)
    <br>
1. [http://localhost:5173/](http://localhost:5173/ "ローカルホスト")にアクセスして下記と同じものが表示されればinstall完了
    ![スクリーンショット 2024-09-05 22.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/588a20c8-93b7-4ac9-32d4-dea12384f236.png)
    <br>




### vitestのinstall
1. Project内にターミナルで移動(今回の場合はvite-project)
   ※ターミナル移動していなければ現在いる所
    ```ruby:bash
    cd vite-project
    ```
    <br>
1. vitestのinstall
    ```ruby:bash
    npm install -D vitest
    ```
    <br>
1. 下記を1つずつ実行しsrcに移動、testファイルと実装ファイルを作成する
    ```ruby:bash
    cd src
    touch sum.js  
    touch sum.test.js
    ```
    <br>
1. コードエディタ(vscodeなど)を開き先ほど作ったファイルに下記コードを入力し保存
    ```typescript
    // sum.js
    export function sum(a, b) {
        return a + b
    }
    ```
    ```typescript
    // sum.test.js
    import { expect, test } from 'vitest'
    import { sum } from '../project/sum.js'

    test('adds 1 + 2 to equal 3', () => {
        expect(sum(1, 2)).toBe(3)
    })
    ```
    <br>
1. projectのルートディレクトリにあるpackage.jsonを下記のように編集
    ```diff_json
    "scripts": {
        "dev": "vite",
    +   "test": "vitest",
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview"
    }
    ```
    <br>
1. projectのルートディレクトリでターミナルを開きtestを実行する
    ```ruby:bash
    npm run test
    ```
    <br>
1. 下記のように1 passedが表示されていれば正しくtestが実行されており、実装完了
    ![スクリーンショット 2024-09-05 22.39.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/289d817f-85a6-647a-8146-5f0ef58fc92c.png)
    <br>

### Reactコンポーネントのテスト環境構築
1. 必要なライブラリのインストール
    ```ruby:bash
    npm install --save-dev  @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdom
    ```
    <br>

1. jest-domを使いことができるようにsetupTests.tsファイルを作成し下記を記載
    ```typescript
    // setupTests.ts
    import '@testing-library/jest-dom/vitest'
    ```
    <br>
1. vite.config.tsに上記で作ったファイルをテスト時に参照するように設定する
    enviromentはdomを構築する時に使用する環境
    globalsはvitestをglobalで使用することをここで宣言しておくと各ファイルでのimportが不要になる
    ```diff_typescript
    + /// <reference types="vitest" />
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react-swc'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
    +  test: {
    +    globals:true,
    +    environment:'jsdom',
    +    setupFiles: "./setupTests.ts"
    +  },
    })
    ```
    <br>
1. typescriptの警告が出ないようにtsconfig.app.jsonを修正
    ```diff_typescript
    {
      "compilerOptions": {
        ...,
        "noFallthroughCasesInSwitch": true,
    +    "types": ["node", "vite/client","vitest/globals","@testing-library/jest-dom"]
      },
      "include": ["src"]
    }
    ```
    <br>
1. App.tsxを開き中のコードを全て消して下記コードに書き換える
    ```typescript
    import './App.css'

    function App() {
      return (
        <>
          <p>App component</p>
        </>
      )
    }

    export default App
    ```
    <br>
1. srcフォルダー内にtestファイルを作成する
    ```ruby:bash
    cd src
    touch App.test.tsx
    ```
    <br>
1. App.test.tsxに下記コードを貼り付ける
    ```typescript
    import { render, screen } from "@testing-library/react";
    import App from "./App.tsx";

    describe("App page test", () => {
      it('should render the text "App component"', () => {
        render(<App/>);
    
        expect(screen.getByText("App component")).toBeInTheDocument();
      });
    });
    ```
    <br>
1. testを実行してみて正常に動作することを確認する
    ```ruby:bash
    npm run test
    ```
    <br>
    
1. 完成したファイル構成（色は気にしないで下さい）
![スクリーンショット 2024-09-12 18.26.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329093/1caeb83c-5962-d8cd-773e-651c359f1896.png)

## おわりに
vite+SWC vitest typescript の環境構築についてまとめました。
初めは難しく感じるかも知れませんが、1つ1つ何をやっているかを考えながらやるように心がけると慣れてくるので焦らずやってみて貰えればと思います。
誰かの力に慣れれば幸いです。

もし参考になった方が居られましたら「いいね！」もお願いします:thumbsup: