2022-12-01

Vite 單元測試設置

Vitest Config 設定方式
透過 vitest.config.js 檔案調整測試設定
執行 npm 指令時帶參數指定設定檔案路徑
直接在原先 vite.config.js 中調整

Vitest config option

Vitest config調整什麼？

include
- Type：string[]
- 預設值：['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
藉由這個欄位我們可以提供 glob 格式讓 vitest 去比對哪些是測試檔案，也可以放入多個條件在陣列中。
1
2
3
4
5
6
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
include: ['**/*.spec.js'],
},
})
這個設定主要會影響到後續我們要如何擺放測試程式碼，因此做規劃時可以按需求考量調整。
exclude
- Type： string[]
- 預設值： ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**']
藉由這個欄位我們可以提供 glob 格式讓 vitest 去排除哪些不是測試檔案，也可以放入多個條件在陣列中。
1
2
3
4
5
6
7
import { defineConfig } from 'vitest/config'

export default defineConfig({
test: {
exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**'],
},
})
與 include 相反，這次則是要排除哪些路徑不需要尋找是否有測試檔案，其中如果有用到 cypress 做 E2E 測試的話，預設規則中就已經有另外排除了，所以沒必要的話不必特別設置，但可以先記得有這個方便的欄位。

<li><b>Globals</b>
    <div> 
        <ul>
            <li>Type：boolean</li>
            <li>預設值： false</li>
        </ul>
        由於在撰寫測試時，Vitest 預設是需要自己按需要引入對應的方法等等，如果要類似像 Jest 以全域的方式注入到測試中，就可以透過在執行時加上 --globals 選項，或是在 vitest config 選項中加入 globals: true 。
        <div>
        1
2
3
4
5
6
import { defineConfig } from 'vitest/config'
export default defineConfig({
    test: {
        globals: true,
    },
})

      
        <div>
            原先設定前，測試程式碼需要如下方引入：
            1
2
3
4
5
6
7
import { describe, it, expect } from 'vitest'

describe('HelloWorld', () => {
    it('1 + 1 should be 2', () => {
        expect(1 + 1).toBe('2')
    })
})

        </div>
        <div>
        加入 Globals: true 後，就不需要顯示引入 vitest 測試相關的 API，讓測試看起來更乾淨：
        1
2
3
4
5
describe('HelloWorld', () => {
    it('1 + 1 should be 2', () => {
        expect(1 + 1).toBe('2')
    })
})

        </div>
        </div>
    </div>
</li>

<li><b>environment</b>
    <div>
        <ul>
            <li>Type：'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string</li>
            <li>預設值： 'node'</li>
        </ul>
        <div>
        由於 Vitest 本身默認環境 Node.js，因此若要在測試中仿造瀏覽器的應用程式，可以透過類似 jsdom 等工具來取代，而已經介紹過的npm 指令的寫法之外 -environment jsdom ，還可以在測試檔案上以 docblock 或 comment 風格的方式註記。
        </div>
        <div>
        Docblock 風格：
        1
2
3
4
5
6
7
/*** @vitest-environment jsdom*/

it('use jsdom in this test file', () => {
const element = document.createElement('div')
    element.innerHTML = '<p>Hello, HTML!</p>'
    expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
})

        </div>
        <div>
        Comment 風格：
        1
2
3
4
5
6
// @vitest-environment jsdom
    it('use jsdom in this test file', () => {
    const element = document.createElement('div')
        element.innerHTML = '<p>Hello, HTML!</p>'
        expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
    })

        </div>
        <div>
        寫在 vitest config 中：
        1
2
3
4
5
6
7
import { defineConfig } from 'vitest/config'

    export default defineConfig({
        test: {
            environment: 'jsdom',
        },
    })

        </div>
    </div>

</li>

### 透過 vitest.config.js 檔案調整測試設定完整語法專案src/test/config/新增vitest.config.js

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [
        vue(),
    ],
    test: {
        // 在這裡加入測試設定
        include: ['**/*.spec.js'],
        // 全域
        globals: true,//就不需要顯示引入 vitest 測試相關的 API，讓測試看起來更乾淨
        environment: 'jsdom',
    },
})

### 執行 npm 指令時帶參數指定設定檔案路徑 package.json script加上(修改）設定./src/test/config/vitest.config.js是剛剛新增的vitest.config.js

1
2
3

"scripts": {
    "test:unit": "vitest --config ./src/test/config/vitest.config.js",
},

執行 test

1	npm run test:unit

github