前端 - 使用了vitest 的mocking功能，就不必再引入mockjs是吗？

Question

mockjs 的功能是模拟数据：
http://mockjs.com

请问vitest 里面的mocking功能：
https://cn.vitest.dev/guide/mocking

是否是指的和mockjs一样的功能，用于模拟数据使用呢？
也就是说使用了vitest 的mocking功能，就不必再引入mockjs，是吗？

Answer 1

功能上的区别就不提了，估计你想问的也只是关于 AJAX 这一块。

它俩的侧重点和应用的阶段不一样。

---

前者原理是拦截了浏览器环境下的 XHR，一般是应用在开发阶段，它是跑在浏览器里的。

现在很多都是前后端分离开发，前端所需的数据都通过 AJAX 取自后端接口。那么很多时候就有一个问题，前端需要某些边界场景的数据，后端没有能力提供给你、或者能提供但成本很高，该怎么办？

要是还不能理解，我就随便举几个场景的例子：

1. 已有接口文档，但因为前后端同时介入开发，前端开发到某个页面时需要接口数据，后端因为工期缘故还没开发完、调不通。
2. 某个业务流程需要用户 VIP9 级以上、且当天消费金额达到 100 元才能触发，但因为种种原因现在无法提供这样的测试账号。
3. ...

这种场景下你要是作为前端，要么就只能等着后端，要么就得自己改代码想办法模拟数据（比如场景二里你把 if 判断条件改了好方便自己触发）。但你等着了 deadline 可不等你；自己模拟数据如果是在视图层改的话侵入性又太强、如果涉及组件多的话可能得改好几处、最后再忘记改回去了可就操蛋了。

于是大家就想，既然直接在视图层里去模拟数据侵入性强，那我在源头 —— 也就是 AJAX 这层 —— 直接给视图层返回一个模拟的响应不就好了？于是 mockjs 就应运而生了。

---

后者一般应用在测试阶段，或者开发阶段里 CI/CD 流程的单测阶段，它是跑在 Node 里的。

这个就纯粹是单测用例需要模拟数据了，不展开讲了。

至于为啥单测也要模拟数据，那可能就非常多了。比如只是为了验证某流程是否能跑通，并不需要真实地调用接口，否则跑一次单测后端产生一堆垃圾数据，即便有测试环境也挺闹心。或者说这个用例并不跟后端接口强耦合，否则后端的接口一旦挂了，结果你前端的用例跑不通了，不也很奇怪？

Answer 2

答案：

Vitest 的 mocking 功能与 Mock.js 的功能并不完全相同，尽管它们都可以用于模拟数据，但它们的用途和上下文有所不同。

• Vitest 的 mocking 功能：主要用于在测试环境中模拟模块、函数、方法等的返回值或行为。这在你需要测试某个组件或函数，但不想依赖其外部依赖（如 API 调用、数据库访问等）时非常有用。Vitest 的 mocking 允许你控制这些依赖的返回值，从而专注于测试你的代码逻辑。
• Mock.js：则是一个专门用于生成随机数据，拦截 Ajax 请求并返回模拟数据的库。它主要用于前端开发中，模拟后端 API 返回的数据，以便在开发过程中不依赖后端服务即可进行前端开发。

因此，使用了 Vitest 的 mocking 功能，并不意味着你就不需要 Mock.js。如果你的测试场景需要模拟外部数据（如 API 响应），并且你正在使用 AJAX 或 Fetch 等技术来请求这些数据，那么 Mock.js 可能仍然是一个有用的工具。然而，如果你的测试场景主要关注于模块或函数的内部逻辑，并且你只需要模拟这些模块或函数的返回值，那么 Vitest 的 mocking 功能可能就足够了。

简而言之，两者各有其用，选择哪个取决于你的具体需求和测试场景。