前言

最近在看前端自动化测试相关的东西，在搭建环境的时候发现还是有许多需要注意的地方，而且网上很少有将各种测试（单元测试，集成测试，端对端测试）的环境搭建都提及的文章，对像我这样的新手不太友好，于是便打算删繁就简，希望通过这一篇文章能让大家对Vue项目中自动化测试环境的搭建有个初步的认识，并且能够实现简单的测试用例，主要内容有：

  • 单元测试环境搭建与案例实践（非浏览器环境）

    • 使用Jest测试工具函数
    • 使用Jest+Vue Test Utils测试Vue组件
  • 端对端测试环境搭建与案例实践（浏览器环境）
    • 使用Cypress测试页面

之所以没提及集成测试，是因为对前端而言，很难区分出单元测试和集成测试，普遍认为前端中的单元测试包括了集成测试，有关三种测试的区别，通过下面一张表希望能让大家对单元/集成/端对端测试有个初步的认识，感兴趣的可以继续了解一下测试金字塔和奖杯模型。

单元测试 集成测试 端对端测试
测试对象 代码单元（函数，模块等） 组织在一起的代码单元 整个页面或应用
作用 保证代码单元在给给定输入下得到预期结果 保证多个模块组织在一起可以正常工作 模拟用户在真实环境中的操作，确保一切正常
测试环境 非浏览器环境 非浏览器环境 浏览器环境
代表工具 Jest，Mocha，Karma等 Jest, Testing Library等 Cypress，Puppeteer, NightWatch等

本文所用的框架是vue2，测试工具有Jest，Vue Test Utils和Cypress，选择它们的原因很简单：

图片来自于The State of JS 2021: 测试工具

好吧，其实是因为：