第三题：CommentBox 留言板

副本简介

CommentBox 留言板是一个非常常见的 UI 组件。通过对简单组件的多次练习，帮助你掌握 TDD 在前端开发中的运用，养成刻意拆分组件的习惯。

副本挑战

1. 掌握前端多维度测试与 TDD 的基本步骤

2. 至少练习 3 遍 CommentBox 组件开发

3. 能在 1 小时内完成 CommentBox 题目

时长限制

6 小时

总时长	任务 1	任务 2	任务 3	任务 4
任务	Cypress	Testing Library	Storybook	Outside-In TDD
6h	2h	1h	1h	2h

副本奖励

• 掌握 E2E 级别 Cypress 更直观的 UI TDD 测试路径

• 熟悉单元级别 Testing Library 的行为测试方法与理念

• 由外至内，完整的前端测试驱动开发 (TDD) “套路”

• 掌握视觉级别 TDD 验证，重构到 Storybook，穷举 UI Stories

• UI 重构的挑战：视觉测试，而不是基于 className 或 style 的测试

BOSS 掉落

1. Cypress E2E Cheat Sheet.pdf

2. Testing Library Cheat Sheet.pdf

3. Visual Testing Handbook.pdf