课程章节: 第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视图