继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第10天 2022升级 React18+TS高仿AntD从零到一打造组件库

大白T_T
关注TA
已关注
手记 56
粉丝 9
获赞 1

课程章节: 第5章 组件测试

主讲老师:张轩

课程内容:

今天学习的内容包括:

5-5 添加Button 测试代码 第二部分
6-1 Menu 组件需求分析

课程收获:

fireEvent 其实是 userEvent 的另外一种 更底层的实现,两者使用的代码是一样的 ,使用的时候可以根据实际情况选择

图片描述

Mock 函数可以轻松地测试代码之间的连接——这通过擦除函数的实际实现,捕获对函数的调用 ( 以及在这些调用中传递的参数) ,在使用 new 实例化时捕获构造函数的实例,或允许测试时配置返回值的形式来实现。Jest中有两种方式的Mock Function,一种是利用Jest提供的Mock Function创建,另外一种是手动创建来覆写本身的依赖实现。

menu 导航

组件的使用场景

需求定义

设计

const classes = classNames(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
[`${prefixCls}-loading`]: !!loading,
[`${prefixCls}-background-ghost`]: ghost,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
[`${prefixCls}-block`]: block,
});

vue的数据和视图之间,如果数据变更,视图之所以可以同步更新,是因为所谓的数据劫持,也就是Object.defineProperty/Proxy的监听。

react的函数式编程,是class中的render和hooks中的组件函数在每次state/props被更新后,重新执行函数,由于state/props保持不变状态,所以此时函数执行构建的时候是加载的最新状态数据,通过这样方式达到更新react视图

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP