如何在 Vue 中使用 Jest 进行单元测试？

Vue.js 是一個輕量級的 JavaScript 框架，可以用於開發優秀的前端用戶界面。Jest 是一個 JavaScript 測試框架，可以用於測試 Vue.js 應用程序。本文將介紹如何在 Vue 中使用 Jest 進行單元測試。

安裝 Jest

首先，您需要安裝 Jest，可以使用 npm 或 yarn 來安裝：

npm install --save-dev jest
# 或
yarn add --dev jest

配置 Jest

接下來，您需要在您的項目中創建一個 jest.config.js 文件，其中包含 Jest 的配置：

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)': 'jest-transform-stub',
    '^.+\\.jsx?': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)': '/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}

撰寫測試

現在，您可以開始撰寫測試了。您可以在 tests/unit 目錄中創建測試文件，例如 MyComponent.spec.js：

import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(MyComponent, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

運行測試

最後，您可以運行測試：

npm run test
# 或
yarn test

這樣，您就可以在 Vue 中使用 Jest 進行單元測試了！

總結

在本文中，您學習了如何在 Vue 中使用 Jest 進行單元測試。您可以使用 Jest 來測試 Vue 組件，以確保它們正常工作。