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測試庫進行測試驅動的開發，可以通過關注行為和可訪問性來自信，可維護的前端代碼。
建議：
