博客站

在 Vue 3 中实现单元测试是确保组件和逻辑正确性的重要步骤。Vue 3 的单元测试通常使用 Jest 和 Vue Test Utils 这两个工具。以下是详细的实现步骤和方法：

1. 安装测试工具

首先，安装 Jest 和 Vue Test Utils：

npm install --save-dev jest @vue/test-utils@next vue-jest@next babel-jest

2. 配置 Jest

在项目根目录下创建 jest.config.js 文件，配置 Jest：

// jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^. .js$': 'babel-jest',
    '^. .vue$': 'vue-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1', // 配置路径别名
  },
  testEnvironment: 'jsdom', // 使用 jsdom 环境
};

3. 编写单元测试

在 tests/unit 目录下编写单元测试文件。

测试组件

以下是一个简单的组件测试示例：

// src/components/HelloWorld.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    msg: String,
  },
  setup() {
    const count = ref(0);

    function increment() {
      count.value  ;
    }

    return {
      count,
      increment,
    };
  },
};
</script>

// tests/unit/HelloWorld.spec.js
import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello, Vue 3!';
    const wrapper = mount(HelloWorld, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });

  it('increments count when button is clicked', async () => {
    const wrapper = mount(HelloWorld, {
      props: { msg: 'Hello, Vue 3!' },
    });
    await wrapper.find('button').trigger('click');
    expect(wrapper.find('button').text()).toContain('Count: 1');
  });
});

测试 Composition API

如果需要测试 Composition API 的逻辑，可以直接测试 setup 函数。

// src/composables/useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value  ;
  }

  return {
    count,
    increment,
  };
}

// tests/unit/useCounter.spec.js
import { useCounter } from '@/composables/useCounter';

describe('useCounter', () => {
  it('increments count', () => {
    const { count, increment } = useCounter();
    expect(count.value).toBe(0);

    increment();
    expect(count.value).toBe(1);
  });
});

4. 运行测试

在 package.json 中添加测试脚本：

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

运行测试：

npm test

5. 测试覆盖率

Jest 支持生成测试覆盖率报告。在 jest.config.js 中添加以下配置：

// jest.config.js
module.exports = {
  // 其他配置
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageReporters: ['text', 'html'],
};

运行测试并查看覆盖率报告：

npm test

6. 总结

在 Vue 3 中实现单元测试的步骤如下：

1. 安装测试工具：安装 Jest 和 Vue Test Utils。
2. 配置 Jest：创建 jest.config.js 文件并配置 Jest。
3. 编写单元测试：
   • 使用 mount 测试组件。
   • 直接测试 Composition API 的逻辑。
4. 运行测试：通过 npm test 运行测试。
5. 测试覆盖率：配置并生成测试覆盖率报告。

通过以上步骤，你可以在 Vue 3 项目中实现单元测试，确保组件和逻辑的正确性。