自然卷Harry

findBy 适用于获取异步操作得到的elemet waitFor 验证异步之后发生变化的内容 axios / fetch 通过jest.mock与jest.fn对axios和fetch进行mock

React组件在页面上的阶段 生命周期图示 componentDidMount的使用场景 在组件挂载后-插入DOM树中立即调用 依赖于DOM节点的初始化应该放在这里 网络请求获取数据可在此处进行 适合

单元测试 单元 程序中执行某一特定任务的具有一定独立性的代码模块 单元测试 测试某一独立的代码模块的测试 依赖形如 Mock Function 设置返回值 模拟函数实现 验证函数被调用情况 声明Moc

同步 异步 上文来源 图片来源 异步场景 定时任务：setTimeout， setInterval 网络请求：前端向后台请求API数据，图片加载 事件监听：addEventListener 为什么js

组件树的划分原则 根据单一职责原则（SOLID之一） 根据业务逻辑的亲密关系判定组件关系 如何实现组件树 根据mockup和业务划分组件层次 采用自下而上的方式编写组件 确定当前组件的数据流 需要时对

UI = f(state) React有一套自己的状态管理机制， 组件的生命周期 三大阶段 Mounting(挂载)：已插入真实 DOM Updating(更新)：正在被重新渲染 Unmounting

常用库 @testing-library/user-event（推荐） Firing Events @testing-library/user-event @testing-library/user-

原生事件 概念 直接绑定到DOM元素上的用户事件（如点击，鼠标划过等等） 合成事件 概念 React中封装事件处理的一套机制，React合成事件一套机制：React并不是将click事件直接绑定在do

组件测试 VS. 单元测试 测试目标 组件测试：测试DOM元素是否被渲染（不含样式） 单元测试：测试用户事件，与页面元素的交互 例子 组件测试： 测试Hello组件 Arrange: 安排好多有先要条