比如,假如在 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") 都是失败的...
有没有大神知道是怎么回事?
谢谢!
2
Loserzhu 2021-11-10 14:10:52 +08:00
这个应该是 enzyme 的 bug ,我的解决方法是 find().render().hasClass('your-class-name').
不过我们不用任何第三方组件,不知道能否解决你的问题。 |
3
maichael 2021-11-10 14:40:06 +08:00
楼上的 find().render() 会导致没法模拟 click 之类的测试。
这是个 17 年到现在还有人会碰上的问题,试下 wrapper.update() 之后再查找。内部有状态的组件经常都会有这种问题。 |
4
yazoox OP |