V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yazoox
V2EX  ›  React

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

  •  
  •   yazoox · 2021-11-10 10:25:46 +08:00 · 1229 次点击
    这是一个创建于 1109 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如,假如在 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") 都是失败的...

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

    谢谢!

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

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

    @maichael enzyme 的这些问题还是不少的。不知道 @test-library/react 这个会不会好一些。
    maichael
        5
    maichael  
       2021-11-10 17:29:46 +08:00
    @yazoox #4 enzyme 的 shallow 测试比较好用,mount 的就一般般了,抽象太深就难以调式。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1819 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:34 · PVG 00:34 · LAX 08:34 · JFK 11:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.