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

[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") 都是失败的...

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

谢谢！

[zjsxwc]

直接 div.my-div 不行吗，为什么要用 div[class*="my-div"]

[Loserzhu]

这个应该是 enzyme 的 bug ，我的解决方法是 find().render().hasClass('your-class-name').
不过我们不用任何第三方组件，不知道能否解决你的问题。

[maichael]

楼上的 find().render() 会导致没法模拟 click 之类的测试。

这是个 17 年到现在还有人会碰上的问题，试下 wrapper.update() 之后再查找。内部有状态的组件经常都会有这种问题。

[yazoox]

@zjsxwc 试过啦，搜索不到咧。

@maichael enzyme 的这些问题还是不少的。不知道 @test-library/react 这个会不会好一些。

[maichael]

@yazoox #4 enzyme 的 shallow 测试比较好用，mount 的就一般般了，抽象太深就难以调式。