Enzyme: CSS Attribute selector should support |= and ~=

[mohsen1]

According to W3C spec an attribute selector can have |= adn ~= for matching value of the attribute.

Example: '[class|="someClass"]'

Why this is important and useful
CSS modules can append random strings at the end of css classes to "mangle" them. In test, we want to test for existence of classes without knowing the mangled class. Above example class can be someClass---AbCd123.

[blainekasten]

This is definitely something we would love to support. There is currently a lot of work happening to refactor how we parse CSS and nodes internally. This will be a roadmap item but may take a bit to get to.

I work in the same world with mangled class names. They way I handle it is by having it my build system not mangle at all within the tests. You could try and refactor your build system in that way for now. Or you could import the CSS files and reference them the same way you assign the className values

[mohsen1]

Yes, that's what we did eventually. We got rid of mangling in test.

Have you thought about using a CSS selector engine like Sizzle instead of writing your own?

[stephanschubert]

I just left almost the same comment here https://github.com/airbnb/enzyme/pull/595#r81978830

[davidcai]

Here is another example of requiring ~= support:

<div data-test="item"></div>
<div data-test="item item-active"></div>
<div data-test="item item-promoted"></div>
...

And we'd like to use selectors such as [data-test~="item-active"] to find all active items, and selector [data-test~="item"] to find all items.

[ljharb]

I believe this is covered by v3; @aweary, can you confirm?

[aweary]

@ljharb the infrastructure is there, but this still needs to be implemented. I'll be sending a PR for this today.

[hboylan]

Enzyme support for this would be awesome. I'm currently using Material UI, which mangles classes everywhere.

For mangled classes, most people would be interested in:

• div[class^="something"] - starts with
• div[class$="something"] - ends with
• div[class*="something"] - contains

Here's the full reference from W3.

[aweary]

There's an open PR for this: https://github.com/airbnb/enzyme/pull/1157

[ljharb]

Added in #1157.