从 React CRA 和 Jest 迁移到 Vite 和 Vitest 的经验教训

本文适用于 EDOCODE 2024 年降临节日历，于 2024 年 12 月 16 日发布。

上一篇文章由 EDOCODE 产品经理 Taiji Yamada 撰写：使用 Notion Webhooks 和无代码工具“Make”的自动化电子邮件系统（文章为日语）。

另外，请查看我们母公司集团公司的和之降临节日历！

简介

我们的应用程序 Gojiberry 是一款 Shopify 调查应用程序，可帮助商家从客户那里收集有价值的反馈。

从一开始，我们就通过测试驱动开发 (TDD) 来构建 Gojiberry，以确保我们的应用程序没有错误，并且我们可以在不破坏现有功能的情况下自信地发布新功能。这个基础使我们能够进行大规模的更改，例如从 Create React App (CRA) 迁移到 Vite，同时将干扰降至最低。

当 CRA 被弃用并且它的依赖项变得过时时，我们决定是时候升级到现代构建工具，以更好地支持我们不断增长的应用程序。我们的代码库规模较大，增加了一些复杂性，但事实证明，转向 Vite 的努力是值得的。

我们的目标是迁移我们的两个 React 项目：

• ？调查：向最终用户显示以收集他们的回复。
• ？管理仪表板：商家用来配置调查和查看分析。

如果您是 Shopify 店主，希望收集可行的客户反馈，请立即在 Shopify 应用商店中试用 Gojiberry！

迁移的动机

CRA 过去为我们提供了很好的服务，但它不再被维护，而且它的依赖项也已经过时了。这带来了一些挑战：

• ？ 过时的库：我们无法更新到用户事件 v14 等关键库，它在处理异步测试方面引入了重大改进。
• ？ 缓慢的测试：随着时间的推移，Jest 测试变得越来越慢，我们希望 Vite 和 Vitest 提供更快的构建和测试时间。
• ⚖️ 不一致的行为：在我们的 monorepo 中的两个项目中，两个项目都使用相同的用户事件版本，一个需要使用 act() 包装每个操作，而另一个则不需要。这种不一致造成了混乱并减慢了开发速度。

用户事件 v14 的主要变化

用户事件 v14 中最大的改进之一是要求对所有交互方法使用 wait。这消除了在await waitFor 中包装操作的需要，使测试代码更干净且更易于维护。

之前（用户事件 v13）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

test('updates state on click', async () => {
  render(<MyComponent />);

  userEvent.click(screen.getByRole('button'));

  await waitFor(() => {
    expect(screen.getByText('Updated state')).toBeInTheDocument();
  });
});

之后（用户事件 v14）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from './MyComponent';

test('updates state on click', async () => {
  render(<MyComponent />);

  userEvent.click(screen.getByRole('button'));

  await waitFor(() => {
    expect(screen.getByText('Updated state')).toBeInTheDocument();
  });
});

此更改无需使用 waitFor 显式管理状态更改，从而简化了测试。开发人员不再需要考虑何时包含await waitFor，因为库会自动处理它。

用户事件 v14 和 Vitest 的改进解决了其中许多问题，提供了更干净、更快、更一致的开发体验。

考虑的替代方案

在选择 Vite 之前，我们评估了 Next.js 和 Remix。虽然两者都是强大的框架，但它们需要对我们的代码库和基础设施进行重大更改：

• Next.js 和 Remix：

  • ？ 代码库重组：这两个框架都要求我们重组代码库以适应它们的约定，这将是一个耗时的过程。
  • ?️ 基础设施变化：这些框架不是单页应用程序 (SPA) 框架，因此采用它们需要更新我们的部署和托管基础设施。
  • ⚖️ 对我们的需求来说太过分了：虽然它们为服务器端渲染和路由提供了出色的功能，但这些功能对于我们的用例来说是不必要的。

• 为什么我们选择Vite：

  • ？ 最少的代码更改：Vite 几乎不需要对我们现有的代码库进行任何更改，从而使转换简单而高效。
  • ?️ 与 Jest 一对一兼容性：由于 Vitest 与 Jest 高度兼容，我们可以通过最少的调整重用大部分测试代码。
  • ⚡ 性能改进：Vite 提供了更快的构建时间，Vitest 显着加快了测试执行速度。

通过选择 Vite，我们避免了采用成熟框架的复杂性，同时获得了现代轻量级构建工具的好处。

迁移过程

我们系统地进行了迁移，因为我们的 monorepo 包含两个独立的 npm 项目。以下是我们执行迁移的方式：

1. 从较小的项目开始：

   • ？️ 首先迁移较小的项目使我们能够识别潜在的陷阱，而不会冒较大项目的风险。

2. 迁移步骤：
   
   每个项目的流程都遵循以下步骤：

   • ？ 迁移到 Vite：用 Vite 替换 CRA，修复任何错误，并确保应用程序正确构建和运行。
   • ？ 修复 TypeScript 错误：Vite 引入了更严格的 TypeScript 规则，暴露了代码库中的问题。修复这些问题使代码更具弹性并减少了不良做法。
   • ✅ 迁移到 Vitest：将测试从 Jest 转换到 Vitest。
   • ？ 修复测试错误：解决由于 Jest 和 Vitest 处理某些场景的方式差异而导致的任何损坏的测试。
   • ？ 升级到用户事件 v14：更新测试库并修复损坏的测试。虽然许多测试需要手动修复，但大多数问题源于不正确的测试用例，例如在必要时不等待 React 状态更改。这是在我们的测试中发现并纠正错误的宝贵机会。

3. 对更大的项目重复：

   • ？成功迁移较小的项目后，我们将相同的步骤应用于较大的项目。

遇到的挑战

• ？ 损坏的测试：迁移到 Vitest 并升级到 user-events v14 导致大量测试失败。然而，这些失败揭示了我们的测试用例中的潜在问题，例如缺少对 React 状态更改的等待调用。解决这些问题提高了我们测试的准确性和可靠性。
• ?️ TypeScript 严格性：Vite 更严格的 TypeScript 规则暴露了我们代码中的有问题的模式。虽然修复这些错误需要付出额外的努力，但最终结果是一个更干净、更有弹性的代码库。

结果

从 CRA 迁移到 Vite，以及向 Vitest 和用户事件 v14 的过渡，为我们的开发工作流程带来了重大改进：

• ⚡ 更快的构建和测试时间：迁移后，我们的测试套件现在可以在减少 30% 的时间内完成，显着加快了我们的 CI 管道。
• ？ 即时热重载：Vite 在开发过程中的热模块替换（HMR）几乎是瞬时的，相对于 CRA 来说是一个巨大的改进，使开发更加无缝和高效。
• ？ 提高了测试清晰度和可靠性：升级到 user-events v14 和 Vitest 带来了更干净、更一致的测试。迁移过程中修复了许多错误的测试，帮助我们发现隐藏的错误并提高整体代码质量。
• ?️ 弹性代码库：Vite 更严格的 TypeScript 规则暴露了我们代码中需要改进的几个领域，使应用程序更加健壮并减少了不良实践的可能性。

迁移改变了游戏规则，使我们能够更快地迭代，同时保持对代码库的信心。

经验教训

以下是我们的一些经验总结：

• ？ 从小处开始：从小项目开始，以降低风险并完善流程。
• ⏳ 针对损坏的测试制定计划：预期某些测试用例会损坏并分配时间来修复它们。这些失败往往揭示出值得解决的更深层次的问题。
• ?️ 接受更严格的规则：虽然更严格的 TypeScript 规则和框架差异最初感觉像是障碍，但它们最终会带来更好的代码库。
• ？ 仔细评估框架：选择与您现有架构和目标相符的工具。

结论

从 CRA 迁移到 Vite 和 Vitest 为我们的工作流程带来了显着改进。现在，由于更严格的 TypeScript 规则，我们可以享受更快的构建、带有用户事件 v14 的更干净的测试代码以及​​更具弹性的代码库。

使这一过渡更加顺利的关键因素之一是我们对测试驱动开发 (TDD) 的早期投资。通过一套全面的测试，我们能够自信地进行大规模更改，而不会破坏现有功能。

如果您正在考虑进行类似的迁移，我们希望我们的经验能够提供宝贵的见解来指导您的旅程。

---

明天，2024 年 12 月 17 日，这篇文章将是 从 B2C 转向 B2B：营销人员的自白，作者：Gojiberry 产品营销经理 Amee Xu。

和之集团，我们正在招聘！如果您有兴趣，请使用以下链接查看我们的空缺职位：

工作机会 |和之集团

以上是从 React CRA 和 Jest 迁移到 Vite 和 Vitest 的经验教训的详细内容。更多信息请关注PHP中文网其他相关文章！