背景介绍：

前端测试目前最主流的是使用 jest 这个测试框架配合 testing library 这个库适配各种前端框架，使用 jsdom 或者 happy-dom 等虚拟浏览器环境来做测试。

虚拟浏览器环境测试的问题

主要问题出在使用虚拟浏览器环境进行前端测试，会出现需要更多额外的配置和匹配器只能匹配 css 属性的值，而无法看到作用在元素上的样式

来自 @testing-library/jest-dom/vitest 的匹配器 toHaveStyle 检查，但是你不好奇样式真的作用在我们测试的元素上了吗？

我们实际去查询下这个元素的样式

发现居然匹配出来不对

这是 jsdom 的问题，主要是在模拟的浏览器环境里实现对性能降低很多。

使用浏览器模式

有一个真实的浏览器环境，可以看到渲染成果，甚至是可以交互的

浏览器模式的问题

社区不是很活跃

1. vue,react,angular,svetle 有社区组织维护
   
   
2. solid preact 都是个人在维护
   
   
   
   
   

bug

时不时在每次修改测试自动重启时，会卡住，需退出重新运行测试

资料

1. vitest 的官方文档
2. vite conf 上的介绍 和 b 站上的讲解版
3. 快速上手的视频教程（youtube 和 b 站的首发哦）
4. 我自己手写的 component 全覆盖测试的小仓库