react 下面,用 enzyme mount 组件,编写测试的时候, css selector 怎么选取 div with multi class

2021-11-10 10:25:46 +08:00
 yazoox

比如,假如在 chrome devtools elemnts 页面里面看到的是如下内容,

<div class="siva ffdaj my-div" >
  <button class="jkda fjda my-button" role="click-button" />
</div>

我用 enzyme 写测试

const wrapper = mount(组件);
expect(wrapper.find("div[class*='my-div']").length).toEqual(1); // false
expect(wrapper.find("button[role='click-button']").length).toEqual(1); // true

这句话 div[class*=my-div] 我在 chrome->dev tools-> elements 页面,Ctrl-F 后,直接输入,是能够正常工作的,找到该 div 的。但是放到 react/enzyme 的测试里,就不行了。

然后,只要不是 div ,换成其它元素,比如,button, li ,ul, span, etc. 用非 class 的 属性方式去查找,也是能够成功的。

但问题是,我们使用的一些组件,是第三方的,生成 的就是 div ,只能通过它特定的 class name 去查找确认是否加载成功。

但这个 enzyme 的 css selector + react 后,和通用的 css selector 好像不一太一样了。有什么翻译原则么?我也试过,把 class->className ,没有啥用... 比如 wrapper.find("div[className*='my-div']") or wrapper.find(".my-div") 都是失败的...

有没有大神知道是怎么回事?

谢谢!

1223 次点击
所在节点    React
5 条回复
zjsxwc
2021-11-10 10:39:33 +08:00
直接 div.my-div 不行吗,为什么要用 div[class*="my-div"]
Loserzhu
2021-11-10 14:10:52 +08:00
这个应该是 enzyme 的 bug ,我的解决方法是 find().render().hasClass('your-class-name').
不过我们不用任何第三方组件,不知道能否解决你的问题。
maichael
2021-11-10 14:40:06 +08:00
楼上的 find().render() 会导致没法模拟 click 之类的测试。

这是个 17 年到现在还有人会碰上的问题,试下 wrapper.update() 之后再查找。内部有状态的组件经常都会有这种问题。
yazoox
2021-11-10 16:43:06 +08:00
@zjsxwc 试过啦,搜索不到咧。

@maichael enzyme 的这些问题还是不少的。不知道 @test-library/react 这个会不会好一些。
maichael
2021-11-10 17:29:46 +08:00
@yazoox #4 enzyme 的 shallow 测试比较好用,mount 的就一般般了,抽象太深就难以调式。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/814342

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX