Cypress 安装及入门排坑指南

最近准备给公司项目做重构，原本是打算使用Jest来作为测试工具的，刚好无意之中接触到了Cypress这款测试工具，虽然用上它非常的不容易（简直是一波三折），但是用上了之后觉得真香啊。我们本篇文章就是讲Cypress如何安装和使用，以及解决安装和使用过程的坑。

提前预先告知一下遇到的问题：

1.cypress 包下载不下来
2.Cypress 应用程序下载太漫长，经常性失败（挂梯子也没用）
3.TypeScript 类型错误

为什么选择 Cypress？

Cypress是新一代的前端测试工具。可以测试在浏览器中运行的一切。并且它的所有动作都是在浏览器环境运行的，这意味着你通过Cypress跑测试用例跟在生产环境使用一模一样。这会比Jest这种在虚拟浏览器中进行测试更加可靠。

安装 Cypress

安装Cypress可是非常的不容易，使用Cypress最大的障碍就是安装Cypress——这太折磨了吧。

初始化项目

我们这里使用vite快速创建一个项目（额外贴上Webpack构建的 👉 demo）

pnpm create vite 

根据指引选择你想要的框架与配置（不同框架之间配置基本一致），我的如下：

✔ Project name: cypress-vite
✔ Select a framework: › React
✔ Select a variant: › TypeScript 

进入文件目录并安装基本的依赖

cd cypress-vite && pnpm install 

不知道为什么，最近npm的依赖基本安装不下来（我看群里有好几个人都说最近安什么包都安不下来）。没办法，换淘宝源吧

npm config set registry https://registry.npm.taobao.org 

重新pnpm install算是安装上了

安装 cypress 依赖

pnpm install cypress --save-dev 

尝试启用cypress

npx cypress open 

第二个折磨来了，报错内容如下

No version of Cypress is install