零门槛开跑！前端单元测试实战指南

2024-02-01 18:03:26

在前端开发的浩瀚江湖中，单元测试犹如一位武功秘籍，助你练就真功夫，斩获开发利器。今天，我们就来一场实战演练，手把手带你闯荡前端单元测试的江湖！

起步：从 Vue CLI 创建项目

首先，让我们从头开始创建一个 Vue CLI 项目。打开终端，输入以下命令：

vue create unit-test-project

稍等片刻，项目创建完成。进入项目目录：

cd unit-test-project

安装单元测试框架：Jest

下一步，我们安装单元测试框架 Jest。Jest 是一个轻量级、快速且易于使用的 JavaScript 测试框架，非常适合前端测试。

npm install --save-dev jest

编写第一个测试用例

现在，让我们编写第一个测试用例。在 src 目录下新建一个名为 HelloWorld.spec.js 的文件。文件内容如下：

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

describe('HelloWorld', () => {
  it('renders a greeting', () => {
    const wrapper = shallowMount(HelloWorld)
    expect(wrapper.text()).toBe('Hello Vue 3!')
  })
})

这个测试用例检查 HelloWorld.vue 组件是否正确渲染了 "Hello Vue 3!"。

运行测试用例

一切准备就绪，我们可以运行测试用例了。在终端中输入：

npm run test

如果测试用例通过，你会看到以下输出：

 PASS  ./src/HelloWorld.spec.js
  HelloWorld
    ✓ renders a greeting (5ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.19s
Ran all test suites.

恭喜！你已经成功编写并运行了第一个前端单元测试用例。