Let's Code
0%

Vue 單元測試 - 基礎入門

Posted on In

為了不斷建立以及加深自己的技能，即便目前工作上未能使用，還是可以提前做些準備，之前看到 Mike 老師推出的 vue 單元測試，就先入手～
趁近期有空先來奠定下測試的基礎，未來可以在專案內練習撰寫！

專案創建

若一開始專案沒有選擇 jest 或加入測試 要如何在現有專案加入？

  • 可以進入該專案進行安裝
    vue add unit-jest

這裡創建的專案是使用 vue-cli 創建，並且在自選項目加入 unit test 

1
vue create my-project

執行 test

npm run test:unit

更改預設的測試檔案位置

component 與 測試的檔案，可以放在同一個資料夾中，以方便找尋

  1. 建立 jest.config.js 來設定 jest
  • testMatch: 指定從 src 資料夾開始找尋與 spec 相關的檔案
1
2
3
4
5
6
7
8
9

module.exports = {

  preset: "@vue/cli-plugin-unit-jest",

  testMatch: ["**/src/**/*.spec.[jt]s?(x)"],

};

**`

測試的基本架構

  • describe : 類似群組概念，可以包一個或多個相關的測試。
  • it 與 test 一樣：其內容為測試的單位，裏面撰寫測試內容
  • 第一個參數，用來表示該測試的敘述（”Test to do list”, “Test to do 1”, “Test to do 2” ）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

describe("Test to do list", () => {

  
  it("Test to do 1", () => {

  });

  
  test("Test to do 2", () => {

  });

});


  • it 也可以單獨另外撰寫
1
2
3
it('這是test case',()=>{

})
  • 執行測試呈現的樣子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { shallowMount } from '@vue/test-utils'

import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {

	it('renders props.msg when passed', () => {
		
		const msg = 'new message'
		
		const wrapper = shallowMount(HelloWorld, {
		
		props: { msg }
	
	})

		expect(wrapper.text()).toMatch(msg)
		//
	})

})
  • wrapper 是指 HelloWorld 這個 component
  • wrapper.text() : 會顯示此元件中所包含的文字
  • expect(wrapper.text()).toMatch(msg):
    • toMatch 有合乎

expext 與斷言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


describe("Test to do list", () => {

  
  it("Test to do 1", () => {

    expect(1 + 1).toBe(2);

  });

  
  it("Test to do 2", () => {

    expect(4 - 1).toBe(3);

  });

});


  • expect: 預期需要匹配的項目，如放入變數、component、function
  • toBe(百分之百準確): 斷言，用什麼方式來匹配，這裡使用 toBe 函式

其他備註

而官方網站已建議若要創建新專案可以使用 vite 為基礎的專案。所以新開的專案都是使用 Vitest (之後有機會再使用新專案來開看看)。
這邊因先根據教學來進行，故先使用 vue-test-utils + jest