fullstack react tdd example
1.0.0
欢迎使用React组件驱动的开发和DOM测试MonorePo！该存储库包含有关使用测试驱动的开发（TDD）和DOM测试进行有关构建反应应用程序的全面讨论的所有代码和示例。这是谈话本身的链接。 MonorePo已使用PNPM和TurborePo组织，以简化包装管理和构建流程。
如果您不熟悉MonorePo的概念，那么它是一个包含多个项目的单个存储库。在这种情况下，MonorePo包含一个共享的UI库和几个React应用程序。共享的UI库包含可重复使用且可访问的React组件以及它们的测试和故事。 React应用程序展示了组件使用和集成。 Next.js应用程序演示了与Mantine UI库的模态组件中反应中组成的力量。
您可以在此处阅读有关Monorepos的更多信息。
该MonorePo的主要目标是展示用于构建可重复使用且可访问的React组件的最佳实践，以及如何使用React Testing Library和Storybook等工具有效地测试它们。此外，它展示了使用模拟服务工作者在测试中处理外部依赖项的使用，并说明了行动中的后端for-Frontend（BFF）模式。这次演讲是针对前端和后端体验混合的观众量身定制的，强调了React中构图的力量及其如何应用于组件开发和测试。
最终，我们看到了如何构建和测试此界面：
monorepo的结构如下：
frontend ：使用Create React应用构建的React应用程序来演示组件使用和集成。mantine-example ：Next.js应用程序，证明了与Mantine UI库的模态组件中的组成功能。该应用程序被用作对话的介绍，突出了构建和测试反应组件时组成的好处。ui ：共享UI库，其中包含可重复使用且可访问的React组件以及其测试和故事。types ：包含其他软件包使用的打字稿类型的共享库。mocks ：共享库，其中包含其他软件包使用的模拟数据。 您需要在全球安装PNPM以运行MonorePo。
开发此MonorePo时使用的PNPM版本为8.2.0 ，节点版本18.16.0 。
已安装的故事书的版本在运行先前版本的节点时会出现问题。请使用至少节点版本18.16.0 。
要安装MonorePo的依赖项，请运行以下命令：
pnpm install
pnpm build可以使用以下命令运行monorepo：
pnpm run dev ：在开发模式下运行MonorePo。pnpm run build ：构建用于生产的MonorePo。pnpm run start ：在生产模式下运行MonorePo。pnpm run test ：运行MonorePo测试。要运行故事书，请运行以下命令：
pnpm run storybook您可以运行回购的所有测试，也可以为特定软件包运行测试。
要运行所有测试，请运行以下命令：
pnpm run test要运行特定软件包的测试，请参考目录并运行以下命令：
pn test -- --watch要运行应用程序测试，请运行以下命令：
cd apps/frontend
pnpm run test -- --watch要运行组件测试，请运行以下命令：
cd packages/ui
pnpm run test -- --watch我希望您能发现这种MonorePo可用于理解反应组件驱动的开发和DOM测试的最佳实践。随时探索代码，运行示例并为存储库做出贡献。愉快的编码！
现代前端的建议的API体系结构是前端模式的后端：
您可以在这里阅读更多有关它的信息。
这是演讲中的摘要和关键要点：
摘要：Pack Software主管Paul Hammond介绍了由REACT和DOM测试进行组件驱动的开发，涵盖了诸如测试驱动的开发，可访问性和现代前端实践等主题。
想法：
见解：
引号：
习惯：
事实：
参考：
一句话要点：通过React测试库进行测试驱动的开发，可以通过关注行为和可访问性来自信，可维护的前端代码。
建议：
