前言
当今的 Web 开发已经越来越依赖前端框架和现代化的技术栈，而测试也成为了一个不可忽视的环节。在进行前端测试时，Jasmine 和 Jest 都是非常受欢迎的选择，它们各自都有自己的优势。本文将介绍从 Jasmine 迁移到 Jest 的心路历程，并分享一些具体的经验和指导意义。
Jasmine 的缺点
在我使用 Jasmine 进行测试的过程中，发现它有一些缺点：
- Jasmine 的运行速度较慢
- Jasmine 不能很好的与 React 集成（需要手动安装和配置测试环境）
- Jasmine 的错误信息难以理解和定位问题
- Jasmine 不能很好地处理异步代码的测试
综合以上各个方面，我考虑迁移到 Jest。
Jest 的优点
相比于 Jasmine，Jest 更加快速、高效，并且能够更好地与 React 集成。Jest 对于异步代码的测试有很好的支持，并且它还具有以下优点：
- 快速： Jest 的快速率更高，可以更快地运行测试。
- 交互式测试方式：Jest 具有可交互的测试方式，可以让测试更加直观。
- 清晰的错误信息：Jest 的错误信息将更清晰、更精准，使得测试结果更加可靠。
迁移流程
安装 Jest
首先，需要在项目中安装 Jest：
--- ------- ---------- ----
配置 Jest
为了让 Jest 与项目进行集成，在项目的根目录下创建 jest.config.js 文件，并编辑如下信息：
-------------- - -
----------------- -
--------------------------- ---------------------
----------- ------------------
--
--------------------- -
-----
------
-------
-----
--
---------- -
------------- -----------
------------------- ------------
--
-------------------- ------------------------------
------------------- --------------------
--其中包括：
moduleNameMapper: 将.css、.less、.scss和.sass的文件都作为identity-obj-proxy进行处理。moduleFileExtensions: 表示当import文件时可以省略的后缀名。transform: 表示 Jest 如何转换代码，将.vue文件转换为vue-jest，将.js和.jsx文件转换为babel-jest。snapshotSerializers: Jest 可以将测试快照存储并与之后的改动进行比较，而使用enzyme-to-json/serializer插件可以存储更有效的快照。setupFilesAfterEnv: 设置 Jest 运行测试时需要先加载的文件，此处加载的是./tests/setup.js。
以上，完成 Jest 的基本配置。
编写测试
接着，需要根据实际项目的情况编写对应的测试文件。对于使用了 React 的项目，通常可以使用 @testing-library/react 来编写相应的测试代码：
------ ----- ---- --------
------ - ------- ------ - ---- -------------------------
-- --
------ --- ---- -------------------
--------------- -- -- -
---------- ---- ----- -- -- -
-------
---- --
--
------------------------------ -----------------------------
---
---以上是一个简单的测试用例，当 App.js 中包含 Hello World 的文本时，测试用例将通过。
运行测试
完成测试代码的编写后，就可以进行测试了。此时可以将 package.json 中的 test 配置改为以下命令：
-
---------- -
------- ----- ------------
-
-上述命令表示每当修改了代码后会自动运行全部的测试用例。
总结
本文介绍了从 Jasmine 迁移到 Jest 的心路历程，首先对比了 Jasmine 和 Jest 的优缺点，然后详细讲解了如何进行迁移，最后分享了如何编写和运行测试用例。靠着 Jest 的优异表现，我们可以更快、更准确的测试 React 项目的组件和其他代码。
最后，希望借此文给同样在迷茫 Jasmine 和 Jest 之间的前端小伙伴一些思路和指导。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6470091e968c7c53b0e2fd0a