Implement matchesClass method for class name matching with RegExp

[aweary]

This allows you do so stuff like:

expect(wrapper.hasClass(/foo/)).to.be(true)

This is especially useful in instances where folks may be using CSS modules that are being scoped with appended hash values.

[ljharb]

instanceof isn't reliable across realms, and isn't actually a spec-compliant "is regex" test. https://www.npmjs.com/package/is-regex would fix the former.

[aweary]

Didn't know that, thanks!

[ljharb]

I'd prefer a new API, like matchesClass, to overloading an existing one. Polymorphic APIs are confusing and harder to maintain.

[aweary]

Sounds good to me, I'll make those changes ASAP.

[aweary]

@ljharb implemented matchesClass and update the test suites 👍

[lelandrichardson]

@aweary which library are you using that returns hashed css classnames? That answers the question as to why this method would be needed, but I'm wondering if there is another way to solve this. It seems like the css module library could be used in the test and you could assert on the presence of that class instead of using a matchesClassName function, which seems like a highly specialized method.

I am imagining something like:

import Component from './components/Component';
import styles from './styles/Component';

// ...

const wrapper = shallow(<Component />);
expect(wrapper.find(`.${styles.someClassName}`)).to.have.length(4);

or something like that. Does that seem possible?

[aweary]

That would be preferred but the issue we have relates to css-modules/webpack-demo#15. We're using Jest as our test runner and the best option we've found out there is to just ignore these imported CSS files so it doesn't throw.

[aweary]

ping @lelandrichardson any updates on this? 😃

[lelandrichardson]

@aweary I'm still pretty wary on making this a core API. I understand your use case but regex matching on classnames feels like the wrong approach in general to me.

In the mean time, do you think you would be able to get by with just adding your own prototype methods to enzyme for your project?

import { ShallowWrapper } from 'enzyme';
ShallowWrapper.prototype.matchesClass = function (regex) { ... };

[aweary]

I think you're right, after thinking about it more I don't think it's a correct approach in the general case. Im going to think about this more and see if there's some other approach that would cover my use case and also be useful as a core API.

[danny-andrews-snap]

Related to #1629.