用 vite3、vue3.2 和 TypeScript 建立一个单元测试环境

2024-02-08 03:30:38

随着 Vue 3 和 Vue-test-utlis 的正式发布，伴随着新的 API 和新的打包工具 Vite，新的单测方案也呼之欲出。本文将通过阅读 Kagol 老师的文章，结合自己的探索，把最新版本的单测环境分享给大家。

环境准备

首先，我们需要安装必要的依赖。

npm install -D vue@next vite vite-plugin-vue-test-utils @vue/test-utils

然后，在 vite.config.js 中添加以下配置：

module.exports = {
  plugins: [VuePlugin(), VuetifyResolver()],
  test: {
    environment: 'jsdom',
    transformMode: {
      web: [/.[tj]sx$/]
    }
  }
};

创建测试文件

接下来，我们创建一个 HelloWorld.vue 组件作为测试目标。

<template>
  <div>Hello World</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

然后，我们创建一个 HelloWorld.spec.js 文件来测试它。

import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders a message', () => {
    const wrapper = mount(HelloWorld);
    expect(wrapper.text()).toBe('Hello World');
  });

  it('increments the count', () => {
    const wrapper = mount(HelloWorld);
    wrapper.vm.increment();
    expect(wrapper.vm.count).toBe(1);
  });
});