https://github.com/pdsuwwz/tutorial-vue-jest

Tutorial for Vue 3.3 + Jest 29.x
https://github.com/pdsuwwz/tutorial-vue-jest

Last synced: 26 days ago
JSON representation

Tutorial for Vue 3.3 + Jest 29.x

• Host: GitHub
• URL: https://github.com/pdsuwwz/tutorial-vue-jest
• Owner: pdsuwwz
• License: mit
• Created: 2023-05-16T07:39:53.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-18T13:57:19.000Z (over 1 year ago)
• Last Synced: 2024-11-03T13:54:36.842Z (2 months ago)
• Language: JavaScript
• Size: 51.8 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tutorial-vue-jest

Tutorial for Vue 3.3 + Jest 29.x

Vue3.3 + Jest 单元测试入门与实践

本教程将基于以下两种单元测试框架来介绍单元测试的编写及实践

* Jest（当前教程） https://jestjs.io/docs/getting-started

* Vitest https://vitest.dev/guide

# 前提条件

安装以下依赖：

* Node.js LTS 版本（>= 16.x）

* Pnpm 包管理工具（>= 8.x）

## 测试环境搭建

* 引言与框架选择

  * 单元测试在前端开发中的重要性

  * Jest 和 Vitest 的简介和特点

* 测试环境搭建（用例目录结构配置）

  * 安装和 Jest 

## Vue3 测试用例编写

* 编写第一个 Vue3 组件测试用例（先写一个add(1,2).toBe(3) 的用例，再写一个基础的 Vue3 组件）

* 测试 Vue3 组件的渲染、行为、状态和属性

* Vue3 异步组件的测试

* 集成单测到现有 Vue3 项目

## Vitest

* Vitest 简介与安装

* 使用 Vitest 替代 Jest 运行测试用例

* Vitest VS Jest 差异对比

* 总结 & 资料推荐