美文网首页web前端实用知识&技巧
vitest单元测试简单分享(一)

vitest单元测试简单分享(一)

作者: 意随风起 | 来源:发表于2023-02-25 23:06 被阅读0次

先上源码:demo

文件路径:在项目根目录/vue3/my-vue-app文件夹下

一、项目搭建
安装vite和vue,使用 npm 或者 yarn、pnmp都行,终端命令如下:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

二、Vitest、jsdom、 coverage安装
使用 npm 或者 yarn、pnmp都行,终端命令如下:

# npm
npm install -D vitest jsdom @vitest/coverage-c8

# yarn
yarn add -D vitest jsdom @vitest/coverage-c8

# pnpm
pnpm add -D vitest jsdom @vitest/coverage-c8

提示:Vitest 需要 Vite >=v3.0.0 和 Node >=v14

三、 修改项目根目录下的vite.config.js的配置文件,增加:

test: { include: ["tests/*/.test.ts"], environment: "jsdom"}

完整内容如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 单元测试配置
  test: {
    include: ["tests/**/*.test.ts"],
    environment: "jsdom"
  }
})

四、修改package.json配置文件,增加:

"scripts": {"test": "vitest", "coverage": "vitest run --coverage"}

完整内容如下:

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitest/coverage-c8": "^0.29.1",
    "@vue/test-utils": "^2.3.0",
    "jsdom": "^21.1.0",
    "vite": "^4.1.0",
    "vitest": "^0.29.1"
  }
}

五、在项目根目录下新建一个tests文件夹,然后在tests文件夹下新建一个单元测试文件demo.test.ts,完整内容如下:

import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
// 需要测试的组件页面
import Test from '@/pages/demo/test.vue'

const author1 = {
  name: 'pany',
  email: '939630029@qq.com',
  url: 'https://github.com/pany-ang',
}

const author2 = {
  name: 'pany',
  email: '939630029@qq.com',
  url: 'https://github.com/pany-ang',
}

describe('Test', () => {
  it('测试基础数据类型', () => {
    expect(1 + 1).toBe(2)
  })
  it('测试引用类型', () => {
    expect(author1).toEqual(author2)
  })
  it('组件正常渲染', () => {
    const wrapper: any = mount(Test)
    expect(wrapper.contains('div')).toBe(true)
  })
})

参考资料:

  1. vue官网
  2. vite中文网
  3. vitest中文网
  4. Vue Test Utils
  5. 年轻人的第一款单元测试框架

相关文章

  • vitest单元测试简单分享(一)

    先上源码:demo[https://gitee.com/lhq199612/demo.git] 文件路径:在项目根...

  • 如何优雅的 clone

    演示以在 GitHub 上的 Vitest[https://vitest.dev/] 库为例,地址:https:/...

  • vitest框架

    什么是vitest 在高层次上,Vitest 与 Jest 兼容,并提供开箱即用的 ESM、Typescript ...

  • Android单元测试之Mockito

    在博客Android单元测试之JUnit4中,我们简单地介绍了:什么是单元测试,为什么要用单元测试,并展示了一个简...

  • goconvey单元测试

    goconvey单元测试 优点:这种单元测试,有图形可视化界面,可以自动检测单元测试用例,语法相对简单。 缺点:快...

  • Android单元测试(一)

    这章就先来说说android中单元测试的操作,简单走一遍单元测试的流程。为什么要用到单元测试呢,一般开发谁会写单元...

  • 单元测试和OCMock

    OCMock使用一、安装及简单使用:使用Cocoapod引入:pod 'OCMock' 简单使用:新建一个单元测试...

  • iOS - 单元测试

    简单使用单元测试 对方法引用AFN框架的单元测试不写单元测试的程序员是不合格的,为了让自己成为一名合格的程序员,学...

  • iOS - 单元测试

    简单使用单元测试 对方法引用AFN框架的单元测试 不写单元测试的程序员是不合格的,为了让自己成为一名合格的程序员,...

  • iOS - 单元测试

    简单使用单元测试 对方法引用AFN框架的单元测试 不写单元测试的程序员是不合格的,为了让自己成为一名合格的程序员,...

网友评论

    本文标题:vitest单元测试简单分享(一)

    本文链接:https://www.haomeiwen.com/subject/iwlqldtx.html