Jest如何測試Vue組件

Jest 是一個流行的 JavaScript 測試框架，它可以用來測試 Vue 組件。為了使用 Jest 測試 Vue 組件，你需要進行一些配置和安裝相關依賴。以下是使用 Jest 測試 Vue 組件的基本步驟：

1. 安裝 Jest 和 Vue Test Utils

   首先，你需要安裝 Jest 和 Vue Test Utils。這可以通過 npm 或 yarn 完成。

   npm install --save-dev jest @vue/test-utils vue-jest babel-jest
   # 或者
   yarn add --dev jest @vue/test-utils vue-jest babel-jest
   

2. 配置 Jest

   在項目根目錄下創建一個 jest.config.js 文件，并添加以下配置：

   module.exports = {
     preset: '@vue/cli-plugin-unit-jest',
     // 其他配置...
   };
   

3. 配置 Babel

   如果你的項目使用了 Babel，你需要確保 Jest 使用正確的 Babel 配置。在項目根目錄下創建一個 babel.config.js 文件（如果你還沒有的話），并添加以下內容：

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ]
   };
   

4. 編寫 Vue 組件

   假設你有一個簡單的 Vue 組件 MyComponent.vue：

5. **編寫測試**

接下來，你需要編寫一個測試文件來測試這個組件。通常，測試文件會放在與組件相同的目錄下，并以 `.spec.js` 或 `.test.js` 結尾。例如，為 `MyComponent.vue` 創建一個名為 `MyComponent.spec.js` 的測試文件：

```javascript
import { shallowMount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('renders message', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.text()).toContain('Hello Vue!');
  });

  it('reverses message when button is clicked', async () => {
    const wrapper = shallowMount(MyComponent);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('!euV olleH');
  });
});

6. 運行測試

   在 package.json 中添加一個測試腳本：

   "scripts": {
     "test": "jest"
   }
   

   然后運行 npm test 或 yarn test 來執行測試。

請注意，這只是一個基本的示例，實際的 Vue 組件和測試可能會更復雜。Vue Test Utils 提供了豐富的 API 來掛載、操作和斷言 Vue 組件的行為。此外，Jest 也有許多高級功能，如快照測試、代碼覆蓋率報告等。