简介
这是我正在进行的关于如何用更现代的方法来测试React应用程序系列的第二部分。上次我介绍了我喜欢使用的工具。🔨
- 用于端到端测试的Cypress
- 用于单元测试的Vitest
- MSW用于模拟我们的服务
在这篇文章中，我将介绍如何在进入测试之前安装所有东西。
当第一次进入测试时，可能会有一点畏惧，因为有这么多的消息来源声称什么是理想的测试方式，什么是最好的包或框架来使用。但是，为了欣赏测试框架，重要的是看到它们在应用程序中的作用。
我希望就如何测试给出一个非常有主见的观点，以避免决策瘫痪，直接进入测试状态
为测试设置一个React应用程序
为了进行测试，我已经提前创建了一个原始的应用程序。你可以在这里找到它。这是其初始状态的提交，就在这里。
GitHub存储库文件
这是一个由Vite驱动的简单的react应用，当一个按钮被点击时，从jsonplaceholder.typicode.com/posts加载帖子。
下面是它的样子。
抓取JSON，没有什么花哨的
只是对代码做一个非常简单的概述。
我们有两个函数。
- **fetchPosts -**调用端点并获取带有标题、正文和ID的帖子。这被设置在我们的本地状态中
- clearPosts- 将本地状态重置为一个空数组。
然后，这些帖子被迭代并通过地图 函数显示出来。
为什么是这个应用？
获取、转换和显示对API的请求可能是应用开发中最常见的任务。这个应用程序将使我们能够准确地测试这些事情。
我们最终会继续用MSW来模拟JSON服务。用Cypress做一些端到端的可视化测试，并了解 如何用他们的测试运行器 创建测试。最后，通过Vitest，我们将创建一些单元测试，以获得对我们个别组件 和转换功能的一些信心。
我试图让它尽可能的简单，以专注于对我们重要的东西。测试!💯
设置测试包
这将只是一个简单的软件包安装。
对于Vitest:
npm install -D vitest
适用于Cypress。
npm install -D cypress
用于MSW。
npm install -D msw
或者一次全部安装。
npm install -D vitest cypress msw
收尾工作
这是同一仓库的更新提交和所有软件包的正确安装。
现在我们终于准备好一头扎进错综复杂的测试库中了。下一次我将介绍Vitest以及如何使用它的简单语法。
谢谢你的阅读!如果你有更多的问题，不要犹豫，请联系我们。
更多内容请点击可信赖的代码
让我们联系!
如果你喜欢这篇文章，请随时在LinkedIn或Twitter上与我联系。
在我的通讯中查看我的免费开发者路线图和每周科技行业新闻。
原文发表于 https://relatablecode.com 2022年4月25日。
构建可组合的网络应用程序
不要建立网络单体。使用 比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，拥有强大和愉快的开发体验。
把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。
了解更多
测试一个React应用程序。设置一切》最初发表于Medium上的《Bits and Pieces》，人们在这里通过强调和回应这个故事来继续对话。
