前端也要搞测试～ vue + vitest

土豆炒青椒

2022 年 10 月 9 日

前端搞 unit test 的套路和后端差不多，也是找靠谱dependence……然后测……

关于 JavaScript 的测试，听到比较多的有 jest，但各知名博主强烈推荐 vitest，于是我也来玩玩 vitest……

vitest VS jest

vitest 比 jest 快，更多各种 powerful😳
支持 vue，reactJS 等火热前端框架
jest 支持的各种 API，vitest 也可以🤪

——博主们的推荐理由

安装 vitest

以 vue3 为例，安装 vitest 之前需要有 vue 项目……

npm install -g @vue/cli
vue create <project-name>

项目创建好后，即可安装 vitest

npm install -D vitest

vitest 可以使用 jsdom 和 happy-dom，这里以 happy-dom 安装为例

npm install @vitejs/plugin-vue @vue/test-utils happy-dom -D

安装完需要的各种包，可以在 package.json 文件下看到刚刚的安装成果。还可以在 package.json 里添加 vitest script

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },

在 script 栏，添加 test 和 coverage 脚本……

创建 vitest.config.js

在项目文件夹下创建 vitest.config.js

import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
    plugins: [vue()],
    test: {
        globals: true,
        environment: "happy-dom",
    },
    root: ".", // define the root
})

环境配置完成后，可以测试了……

以 HelloWorld 为例，component 里有 HelloWorld.vue，代码如下：

<template>
  <p> {{ msg }} </p>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        message: {
            type: String,
            default: "World",
        },
    },
    setup(props) {
        return {
            msg: props.message,
        }
    }
}
</script>

<style>
</style>

测试 HelloWorld Component

在项目文件下创建 tests 文件夹，用于存放各种测试代码……

在创建的 tests 文件夹下创建 HelloWorld.test.js —— 测试文件命名规则：<component name>.test.js

import { mount } from "@vue/test-utils"
import HelloWorld from "../src/components/HelloWorld.vue"
import { describe, it, expect } from "vitest"

describe("HelloWorld.vue", () => {
    it("should renders is page content is correct", () => {
        const message = "Happy People"
        const testMessage = "Happy People"
        const wrapper = mount(HelloWorld, {
            props: { message }
        })
        expect(wrapper.text()).toBe(testMessage)
    })

    it("should render if props value is correct", () => {
        const message = "Happy People"
        const testMessage = "Happy People"
        const wrapper = mount(HelloWorld, {
            props: { message }
        })
        expect(wrapper.vm.message).toBe(testMessage)
    })
    
})

看看测试效果如何……