标签 前端测试 下的文章

背景介绍:

前端测试目前最主流的是使用 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 全覆盖测试的小仓库

📌 转载信息
转载时间:
2026/1/6 17:04:03