如何用vitest写一个好的测试代码

小趴菜菜籽
316 阅读2分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 一 天，点击查看活动详情”

安装

yarn add -D vitest happy-dom @testing-library/vue 或者
pnpm i -D vitest@"0.25" happy-dom@"6.0.4" @vue/test-utils@"2.0.2"

编写单元测试

原则

更加关注测试对的单元模块， 基于输入的props和slots渲染输出的结果 触发事件更加关注前后事件

导入render

test('it should work', () => 
{ const { getByRole } = render(Button)
  getByRole('button') 
})

官方文档 介绍 | Vue Test Utils (vuejs.org)

@vue/test-utils 工具库可以用来进行vue的测试。 jest 或者 vitest 也可以，这次做项目使用的vitest以及test-utils库，整体参照element-ui的测试代码。针对虽有vue项目通用的@vue/test-utils。

/// <reference types="vitest" />
import { defineConfig } from "vite";
export default defineConfig({
  
});

初始化一个vitest项目

git clone https://github.com/vuejs/vue-test-utils-getting-started

cd vue-test-utils-getting-started npm install

test.js

image.png

image.png

 "devDependencies": {
        "@vue/test-utils": "^1.0.0-beta.13",
        "jest": "^21.2.1",
      }
    },
    "node_modules/@vue/test-utils": {
      "version": "1.0.0-beta.13",
      "dev": true,

组件代码（待测试代码） counter.js image.png 运行测试代码
npm test
已经有了包裹器，可以实现认证该组件渲染出来的 HTML 是否符合预期 image.png

组件测试类型

组件测试 单元测试

测试注意事项

不推荐一味追求行级覆盖率。 采用黑盒测试 用户的交互或 prop 的时间等

好处

如果该组件的内部实现发生被人修改，但由于我们测试主要测试的单元测试，基本测试的是函数能否正常实现其功能，比如1+1是否等于2，只要功能实现，测试就可以通过，也就是软件测试与开发中的黑盒测试，不关注内部具体是如何实现，只关注功能，将内部函数具体实现过程看做盒子不去管它。
一般测试也会专门设置一些特殊值，临界值用于检测代码健壮性。
比如输入的功能，如果输入空值，负值，能不能达到理想得到效果

avatar
文章
阅读
粉丝