SubMenu加入Transition后测试不通过

首页课程实战体系课手记专栏慕课教程

SubMenu加入Transition后测试不通过

来源：7-9 拿来主义 - 自定义 Transition 组件编码第二部分

慕九州9245693

2022-02-11

SubMenu加入Transition后测试不通过, 我去提交记录上看到menu.text.tsx里有这个提交:7-9 update Menu test file,add component mocks to fix the test fails, 里面加了如下代码

jest.mock('react-transition-group', () => {
    return {
        CSSTransition: (props: any) => {
            return props.children
        }
    }
})

加了这段代码测试就没报错了,但不太理解这段代码是什么意思,视频7-9完全没有提到过这个段代码
查了一下jest的文档也没太理解,好像是在说我们引入了react-transition-group这个库,但是我们之后的测试代码没有用到这个库,而且为什么要返回CSSTransition 呢,后面的测试也没用到啊?
拜托老师解释下这段代码的意思

写回答

1回答

张轩

2022-02-12

已采纳

同学你好单元测试应该不管一些动画效果，如果你添加了动画效果，会影响单元测试的最终结果，所以我们要想个办法把 transition-group 直接模拟掉，这段代码其实就是模拟 react-transition-group 的实现，将它直接变成一个包裹成一个 div 就完事了.

这种方式在单元测试里面很常见，因为单元测试就是要做到隔离，尽量不受别的模块的影响。

文档中也有描述，请看：https://testing-library.com/docs/example-react-transition-group/

1

1

慕九州9245693

非常感谢！

2022-02-16

共1条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

相似问题

在submenu中使用Transition 组件后获取 drop1 元素为空了

回答 1

upload测试无法通过

回答 2

动画实现效果和讲的不一样

回答 1

测试用例是不是要穷举所有可能？

回答 1

加了类型断言反而测试不通过了

回答 2

打开慕课网App查看更多内容