[1.0.0-beta.0] className assertion failing when element has multiple classNames

[dptoot]

As you can see the element selection has the correct className asserted but only seems to respect the first. Any suggestions?

 AssertionError: expected the node in <div /> to have a 'glyphicon-menu-right' class, but it has 'text-link'

     HTML:

     <span class="text-link glyphicon glyphicon-menu-right"></span>
      + expected - actual

      -text-link
      +glyphicon-menu-right

[intrepidOlivia]

I am having a similar problem, except that the chai-enzyme seems to recognize all the relevant text, but still fails the test.

[ljharb]

@intrepidOlivia those are two class names - i'd expect you would be using two assertions, not one, to test for those.

[intrepidOlivia]

Are you sure? As you can see, the two class names on the li element are concatenated into a single string. CSS recognizes them as separate classes, but since React only ever sees one string, I don't think it'll recognize it as having multiple class names. Or do you know of documentation that suggests otherwise?

[ljharb]

every API I’m familiar with that takes class names only takes one at a time, or an array.

[intrepidOlivia]

Perhaps so, but I resolved this problem by simply using vanilla enzyme's hasClass function:

[ljharb]

While as enzymes maintainer that surprises me, if enzyme works that way than certainly this matcher should as well.

[Hypnosphi]

It works OK with shallow, but not with mount

[ljharb]

@Hypnosphi to clarify; what's the difference between the two with hasClass? they both call into the same utility function.

[Hypnosphi]

hasClass works in both cases, while should.have.className works only with shallow

[ljharb]

Thanks for the clarification :-)