shallow 和 mount的区别

Question

老师 请问如果有个组件是无状态的 但是引用了一个子组件 这个时候是不是不能用shallow 因为shallow不会渲染子组件 但是我的test case需要测试该子组件的状态 那么是不是只能用mount 还是有其他选择? 另外我看到PriceList里也有Ionicon这样的子组件 为什么可以用shallow进行渲染呢? 谢谢

Answer 1

张轩 2020-04-10 10:10:28

同学你好 第一个问题 假如你要测试子组件内部的状态，你说的没错，选择 mount 方法。

第二个问题 PriceList 组件使用 shallow 渲染，不会把 子组件全部用 DOM 渲染出来，但是会渲染 React vnode tree，还是能够拿到 Ionicon 这样的节点的，可以进行一些简单的断言，比如有多少个子组件之类。

简单来说：shallow对组件的渲染结果不是html的dom树，而是react树，如果你chrome装了react devtool插件，他的渲染结果就是react devtool tab下查看的组件结构，而mount函数的结果是element tab下查看的结果。也就是真正的 DOM 节点。

• 提问者 ywang04 #1

  谢谢老师回复。跟您确认一下 shallow和mount对组件的渲染结果都不是dom树。而PriceList组件使用render渲染是element tab下查看的结果？但是上面您又说PriceList 组件使用 render 渲染，不会把子组件全部用 DOM 渲染出来。有点混淆了。麻烦指明，谢谢

• 张轩 回复 提问者 ywang04 #2

  同学 非常抱歉 回答问题的时候不是很认真 有几个地方打错了 现在修改了 你再看一遍把 请见谅

• 提问者 ywang04 回复 张轩 #3

  这样清楚多了 谢谢老师及时回复。