[筆記] Vue 單元測試初探 @地瓜大的飛翔旅程

章節連結

說明與範例
參考資料
其他 Vue.js 相關文章

隨著程式開發越來越龐大，那麼以「程式」測試「程式」是一件值得學習的投資了。除了節省時間外，也可以藉機測試一下程式的邏輯是否如你所預期的。這邊筆記下 Vue 的前端測試的初探與設定。

說明與範例

- 你需要用程式來模擬程式，所以你會需要一些 “loader”，來讓程式可以讀懂你的程式。
- 如果在預設 vue-cli 沒有選擇 Unit Testing 的話，那麼你可以用 vue add @vue/unit-jest 來安裝所有的套件和 dependencies。
- 若你不是要用 jest 來做測試的話，你可以 google vue add @vue/unit-<XXXXXX 測試套件名稱> 來找

以下用 Jest 為例：
1.安裝設定檔 ( jest.config.js )

// install
vue add @vue/unit-jest
// jest.config.js
module.exports = {
  // 預設值 preset: '@vue/cli-plugin-unit-jest'
  moduleFileExtensions: [ // 告訴 Jest 需要處理的文件副檔名
    'js',
    'vue'
  ],
  transform: { //告訴 .vue, .js, .css......等等檔案要用哪個套件解析，標題用正規表達式來篩選
    '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest'
  },
  moduleNameMapper: { //若檔名路徑有"@"，告知的預設讀取路徑，標題用正規表達式來篩選
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: ['**/tests/**/*.spec.js'], // match 的文件目錄
  transformIgnorePatterns: ['<rootDir>/node_modules/'] // 排除掉不要的檔案
}

// install

vue add @vue/unit-jest

// jest.config.js

module.exports = {

// 預設值 preset: '@vue/cli-plugin-unit-jest'

moduleFileExtensions: [ // 告訴 Jest 需要處理的文件副檔名

'js',

'vue'

transform: { //告訴 .vue, .js, .css......等等檔案要用哪個套件解析，標題用正規表達式來篩選

'^.+\\.vue$': '<rootDir>/node_modules/vue-jest',

'^.+\\.js$': '<rootDir>/node_modules/babel-jest'

moduleNameMapper: { //若檔名路徑有"@"，告知的預設讀取路徑，標題用正規表達式來篩選

'^@/(.*)$': '<rootDir>/src/$1'

snapshotSerializers: [

'jest-serializer-vue'

testMatch: ['**/tests/**/*.spec.js'], // match 的文件目錄

transformIgnorePatterns: ['<rootDir>/node_modules/'] // 排除掉不要的檔案

}

2.更改 test 的起始路徑

{ 
 .......,
"scripts": {
    .......
    "test:unit": "vue-cli-service test:unit",
    ........
  },
 ......
}

{

.......,

"scripts": {

.......

"test:unit": "vue-cli-service test:unit",

........

......

}

3.實際演練

// 測試方法，可視需要部分載入
import { mount, createLocalVue, setMethods } from '@vue/test-utils'
// 建立 local 端的 vue-router
import VueRouter from 'vue-router'
const localVue = createLocalVue()
const router = new VueRouter()
localVue.use(VueRouter)
// 載入要解析的 vue，@ 的設定在 jest.config.js 的 moduleNameMapper 內
// 使用正規表示法，並以 $<number> 表示動態資料夾，如 $1
import SignIn from '@/views/SignIn'

// 撰寫方法
describe('登入', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(SignIn, {
      localVue,
      router
    })
  })

  test('要有2個輸入框和1個按鈕', () => {
    const inputs = wrapper.findAll('input')
    const LoginButton = wrapper.find('button')
    expect(inputs.length).toBe(2)
    expect(LoginButton).toBeTruthy()
  })

  test('handleSubmit should be called after clicking the button', () => {
    const stub = jest.fn()
    wrapper.setMethods({ handleSubmit: stub })
    wrapper.find('button').trigger('submit')
    expect(stub).toBeCalled()
  })

  test('All inputs can be set.', () => {
    wrapper.setData({
      email: 'abc@abc.com',
      password: '1234'
    })
    expect(wrapper.vm.email).toBe('abc@abc.com')
    expect(wrapper.vm.password).toBe('1234')
  })

  test('receive the response successfully if typing the correct account & password', () => {
    wrapper.vm.handleSubmit().then(async () => {
      const mockFn = jest.fn().mockResolvedValue({ status: 'success', message: 'OK' })
      const result = await mockFn()
      expect(result).toStrictEqual({ "message": "OK", "status": "success" })
    })
  })
})

// 測試方法，可視需要部分載入

import { mount, createLocalVue, setMethods } from '@vue/test-utils'

// 建立 local 端的 vue-router

import VueRouter from 'vue-router'

const localVue = createLocalVue()

const router = new VueRouter()

localVue.use(VueRouter)

// 載入要解析的 vue，@ 的設定在 jest.config.js 的 moduleNameMapper 內

// 使用正規表示法，並以 $<number> 表示動態資料夾，如 $1

import SignIn from '@/views/SignIn'

// 撰寫方法

describe('登入', () => {

let wrapper

beforeEach(() => {

wrapper = mount(SignIn, {

localVue,

router

})

test('要有2個輸入框和1個按鈕', () => {

const inputs = wrapper.findAll('input')

const LoginButton = wrapper.find('button')

expect(inputs.length).toBe(2)

expect(LoginButton).toBeTruthy()

})

test('handleSubmit should be called after clicking the button', () => {

const stub = jest.fn()

wrapper.setMethods({ handleSubmit: stub })

wrapper.find('button').trigger('submit')

expect(stub).toBeCalled()

})

test('All inputs can be set.', () => {

wrapper.setData({

email: '[email protected]',

password: '1234'

})

expect(wrapper.vm.email).toBe('[email protected]')

expect(wrapper.vm.password).toBe('1234')

})

test('receive the response successfully if typing the correct account & password', () => {

wrapper.vm.handleSubmit().then(async () => {

const mockFn = jest.fn().mockResolvedValue({ status: 'success', message: 'OK' })

const result = await mockFn()

expect(result).toStrictEqual({ "message": "OK", "status": "success" })

})

參考資料

其他 Vue.js 相關文章

★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構

這是一篇在 Vue 上實作按鈕 / 篩選器的資

★全文分享★ [指南] Vue.js 搭配 Docker 進行佈署

Docker 是個運用了虛擬化技術的套件，讓不

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github

★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

Vue 的專案裡，若要監測使用者的視窗大小

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

樣式方法” title=”[指南] 在 Vue 專案中，修改樣式方法”>

在 Vue 專案中，若要修改對於 <body> 上

★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案

用 Vue CLI 3，可以快速的建立一個 Vue 專案

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、

★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放

這回要挑戰工字型( I-Shape )的顯示樣板。

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸

★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示

這回在從事公司專案時，遇上了一個稍嫌

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的

★全文分享★ [筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來

★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

在 Vue template 的檔案，有時會需要運用到 s

★全文分享★ [筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以

★全文分享★ [筆記] Vue 自訂綁定 style 標籤

Vue 中的 v-bind 有一些預設的 style 選項如 :d

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，

★全文分享★ [筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重

★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

這回實際演練來打造一個即時聊天室來練

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstra

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若

★全文分享★ [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

運用 Vue.js 前端框架，將發送到後端 API 請

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

Vue-cli 運用 npm run build 將專案打包成靜態

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時，

★全文分享★ [筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

這篇是解決不時在測試 Vue 專案上時，常

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生

按讚加入粉絲團