React 单元测试

本文介绍了如何使用Vitest、React Testing Library和MSW进行React组件单元测试的完整流程。通过配置测试环境安装必要依赖后，首先演示了基础交互测试方法：通过data-testid属性定位元素模拟点击事件，利用queryByRole验证组件状态变化。针对包含网络请求的场景，使用MSW构建mock服务器拦截HTTP请求，通过beforeAll和afterAll控制mock服务启停，并用waitFor处理异步渲染验证。测试过程中需注意组件残留导致的重复渲染问题，通过afterEach配合cleanup实现测试环境清理。完整示例包含两个测试用例，分别验证点击灰色按钮卸载内容元素和点击黄色按钮触发mock请求的正确行为，最终形成结构化测试代码模板，涵盖依赖导入、mock配置、测试钩子和断言逻辑的完整实现。--Qwen3