Vitest 单元测试配合 @vue/test-utils 之 Pinia 篇

2023-12-27 12:32:12



VueTestUtils 是 Vue.js 的官方测试实用程序库，提供了丰富的功能和 API 来简化 Vue 组件的测试。Pinia 是 Vue.js 生态系统中流行的状态管理库，它提供了一个响应式且持久化的状态存储，非常适合管理复杂应用程序中的状态。

本文将重点介绍如何将 Vitest 和 @vue/test-utils 与 Pinia 集成，以编写高效且全面的单元测试。

**安装依赖项** 

首先，确保您已安装 Vitest 和 @vue/test-utils：

```shell
npm install -D vitest @vue/test-utils

然后，在您的 vitest.config.js 中配置 Vitest：

import { defineConfig } from 'vitest'
import { createVuetify } from 'vuetify'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setup.js',
  },
  plugins: [
    createVuetify({
      theme: {
        themes: {
          light: {
            colors: {
              primary: '#1976d2',
              secondary: '#424242',
              accent: '#82B1FF',
              error: '#FF5252',
              info: '#2196F3',
              success: '#4CAF50',
              warning: '#FFC107'
            }
          }
        }
      }
    })
  ]
})

配置 Pinia

接下来，在您的组件中配置 Pinia：

import { createPinia, PiniaVuePlugin } from 'pinia'

const pinia = createPinia()

export default {
  install: (app) => {
    app.use(PiniaVuePlugin)
    app.use(pinia)
  },
}

使用 @vue/test-utils 测试 Pinia

现在，您可以使用 @vue/test-utils 来测试使用 Pinia 的组件：

import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
import { useStore } from './store'

describe('MyComponent', () => {
  let wrapper
  let store

  beforeEach(() => {
    store = useStore()
    wrapper = mount(MyComponent, {
      global: {
        plugins: [pinia({ store })],
      },
    })
  })

  it('should increment the count', async () => {
    expect(store.count).toBe(0)
    await wrapper.find('button').trigger('click')
    expect(store.count).toBe(1)
  })
})