组件测试

发表于

需求分析

我们在写完组件以后，要对组件进行测试，前端测试框架较为出名的有mocha、jest和今天我们要用到的vitest。以Button组件为例来看看怎么使用vitest编写测试用例。

安装

1
2
3
npm instlal vitest -D

npm install @vue/test-utils -D

编写测试用例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Button from './Button.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import IconVue from '../Icon/Icon.vue'

describe('Button.vue', () => {
    test('basic button', () => {
        const wrapper = mount(Button, {
            props: {
                type: 'primary'
            },
            slots: {
                default: 'button'
            }
        })
        console.log(wrapper.html())
        expect(wrapper.classes()).toContain('tm-button--primary')
    })
})

遇到的问题

当我们使用vitest测试上面这个用例的时候会遇到一个报错 document is not defined。这是因为在非浏览器环境下是没有document这个对象的，解决这个问题的一种常见方法就是使用jsdom库来模拟浏览器环境，为mount方法提供一个虚拟的document对象。那么我们来安装一下这个库，并且对vitest进行一些简单的配置。

1
2
3
4
5
6
7
npm install jsdom -D

npm install unplugin-vue-macros -D

npm install @vitejs/plugin-vue-jsx -D

npm install @vitejs/plugin-vue -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/// <reference types="vitest" />

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueMacros from 'unplugin-vue-macros'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueMacros.vite({
      plugins: {
        vue: vue(),
        vueJsx: vueJsx(),
      },
    })
  ],
  test: {
    globals: true,
    environment: 'jsdom'
  }
})