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

Last updated at 2024-09-12Posted at 2024-09-05

概要

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

対象者

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

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

背景や前提

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

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

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

今回使用するライブラリのドキュメント

手順・方法

projectの作成

ターミナルを開きcdコマンドを使用して自分がprojectを作りたい場所に移動
bash
```
cd ⚪︎⚪︎⚪︎⚪︎⚪︎
```
viteのprojectを作成する
bash
```
npm create vite@latest
```
Ok to proceed?と表示されたら「y」を入力しEnterを押す
Project nameを入力し(デフォルトで問題なければそのまま)Enterを押す
十字キーを使用し「React」までカーソルを持って行きEnterを押す
十字キーを使用し「TypeScript + SWC」までカーソルを持って行きEnterを押す

下記コマンドが表示されたらinstall完了

bash

cd vite-project ← Project nameで設定したものが表示される
npm install
npm run dev

先ほど表示されたコマンドの1つずつターミナルで実行しローカルホストを立ち上げる
http://localhost:5173/にアクセスして下記と同じものが表示されればinstall完了

vitestのinstall

Project内にターミナルで移動(今回の場合はvite-project)
※ターミナル移動していなければ現在いる所
bash
```
cd vite-project
```
vitestのinstall
bash
```
npm install -D vitest
```
下記を1つずつ実行しsrcに移動、testファイルと実装ファイルを作成する
bash
```
cd src
touch sum.js  
touch sum.test.js
```

コードエディタ(vscodeなど)を開き先ほど作ったファイルに下記コードを入力し保存

// sum.js
export function sum(a, b) {
    return a + b
}

// 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)
})

projectのルートディレクトリにあるpackage.jsonを下記のように編集

"scripts": {
    "dev": "vite",
+   "test": "vitest",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
}

projectのルートディレクトリでターミナルを開きtestを実行する
bash
```
npm run test
```
下記のように1 passedが表示されていれば正しくtestが実行されており、実装完了

Reactコンポーネントのテスト環境構築

必要なライブラリのインストール

bash

npm install --save-dev  @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdom

jest-domを使いことができるようにsetupTests.tsファイルを作成し下記を記載
```
// setupTests.ts
import '@testing-library/jest-dom/vitest'
```

vite.config.tsに上記で作ったファイルをテスト時に参照するように設定する
enviromentはdomを構築する時に使用する環境
globalsはvitestをglobalで使用することをここで宣言しておくと各ファイルでのimportが不要になる

+ /// <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"
+  },
})

typescriptの警告が出ないようにtsconfig.app.jsonを修正

{
  "compilerOptions": {
    ...,
    "noFallthroughCasesInSwitch": true,
+    "types": ["node", "vite/client","vitest/globals","@testing-library/jest-dom"]
  },
  "include": ["src"]
}

App.tsxを開き中のコードを全て消して下記コードに書き換える

import './App.css'

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

export default App

srcフォルダー内にtestファイルを作成する
bash
```
cd src
touch App.test.tsx
```

App.test.tsxに下記コードを貼り付ける

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();
  });
});

testを実行してみて正常に動作することを確認する
bash
```
npm run test
```
完成したファイル構成（色は気にしないで下さい）

おわりに

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up