前言

前幾天，我們討論的是幾個後端經典案例，製作帳密登入以及權限控管的部分
今天開始我們要開始往 bun 在前端的應用去做使用，那現今最主要的前端打包工具
非屬 vite 莫屬，在選擇上並非非黑即白的問題，今天我們配合 bun 的效能與 vite
帶來的穩定度，去做 react 相關的專案

提一下 bun 處理 react 的部分

基本上現在要用 bun 建置 react 專案有兩條路可以走

bun create react-app <專案名稱>

我個人不太推薦用這個指令，不過我還是要提一下，因為他創建的挺慢的
另一點是他的 scaffold 沒有 typescript

另一個指令

mkdir <專案名稱> # 先創建資料夾
cd <專案名稱> # 移到該資料夾
bun init --react

這個處理速度就比較快
並且可以立即啟動

bun start

畫面如下，是可愛的 bun

順便一提，用 bun 啟動的 react 是一個全端專案，他並非單純的 SPA
他的 routes 全都建置在 Bun.serve 為主的方式

如果好奇這段的話，可以在啟動後注意 ./src/index.ts 這一段

用這種方式的好處是，你可以很乾脆的在 bun 的整個生態系進行 react 開發
很適合直接且簡單的小型專案，不過既然我們要建置一個前後端分離的部分，我們各取所長
把 vite 的成熟度帶入我們的專案

我們接下來的部分是專注於前端的部分，
所以我暫時不用這套全端的 solution 有機會可以在這上面多著墨些

Bun + Vite 專案

我們這就啟動一個 bun + vite 的專案

bunx create-vite@latest --template react-ts <專案名稱>

當然也可以用

bun create vite@latest --template react-ts <專案名稱>

這兩個意思是一樣的，擇一即可

用我的指令會跳出選 eslint 或是 oxlint 的部分，
個人非常推 oxlint 不過因為我們重點在 bun 上面，不在 oxlint 上面發力
所以基本上這裏大家選自己喜歡的就好

前端測試

由於前面我已經介紹過 bun 的測試在 day13 的時候，
即便我們這裡是可以用 bun test 的方法作為前端測試的手段，

但我們這裡要講點不一樣的東西，我們這裡要講到用 vitest
處理測試的部分，至於好處壞處之前有提到過，這裡就不加贅述

事前準備

安裝

bun add vitest
bun add @testing-library/react @testing-library/jest-dom @testing-library/user-event
bun add happy-dom

vitest.config.ts 加入 測試的配置

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom',
    setupFiles: './src/tests/setup.ts',
    globals: true,
    css: true,
  }
});

然後因為我們有加入 setupFiles 所以可以在 ./src/tests/setup.ts
加入一些配置

小補充，有些人可能會用 jsdom ，不過 happy-dom 是個快的選擇，不仿給大家推個坑

import '@testing-library/jest-dom/vitest';

記得在 package.json 加入 scripts

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

我們簡單寫個測試看看

./src/tests/Counter.test.ts

import { describe, it, expect } from 'vitest';

describe('小試身手一下', () => {
  it('簡單跑個測試看有沒有載入', () => {
    expect(true).toBe(true);
  })
});

元件測試

我們這裡建立一個 ./src/tests/Counter.test.tsx

import '@testing-library/jest-dom'
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Counter } from '../Counter';

describe('測試一下 Conter 元件', () => {
  it('初始值', () => {
    render(<Counter />)
    const targetText = screen.getByText('0')
    expect(targetText).toBeInTheDocument();
  });

  it('測試點擊按鈕', async () => {
    const user = userEvent.setup();
    render(<Counter />)
    await user.click(screen.getByRole('button', { name: '加一' }));
    expect(screen.getByText('1')).toBeInTheDocument();
  })
});

踩雷筆記 : 這裏記得要 import '@testing-library/jest-dom' 不然 expect 沒有 toBeInTheDocument 的擴展

常用指令

bun run vitest # watch 模式，很適合本地跑
bun run vitest run # 跑一次，可以用於 CI/CD 進行測試
bun run vitest run --coverage # 關於測試覆蓋率

小結

今天我們把 bun 帶進了前端的世界，從 bun init --react 的全端小專案，
到搭配 vite 打造前後端分離的開發環境，最後也透過 vitest 加上
testing-library 幫我們的 React 元件寫了第一組測試，確認初始狀態與
互動行為都符合預期。

測試能跑、專案能建置，只是萬里長征的第一步。