testing-library / jest-dom

:owl: Custom jest matchers to test the state of the DOM

Home Page:https://testing-library.com/docs/ecosystem-jest-dom

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Regex support for `.toHaveClass()`

onlywei opened this issue · comments

Describe the feature you'd like:

With CSS-in-JS and CSS modules, it's pretty common for CSS classes to contain randomly generated unique strings appended to the end. This makes .toHaveClass() extremely limited.

While there are workarounds involving string matching on the actual class string, these are not ideal because many projects prefer to leave this eslint rule turned on: https://github.com/testing-library/eslint-plugin-jest-dom/blob/main/docs/rules/prefer-to-have-class.md

If .toHaveClass() could accept RegExp in addition to strings, that would allow projects to continue using eslint: prefer-to-have-class while also using CSS Modules / CSS-in-JS.

Suggested implementation:

A backwards compatible implementation that simply adds support for RegExp matching for .toHaveClass().

Describe alternatives you've considered:

Teachability, Documentation, Adoption, Migration Strategy:

expect(deleteButton).toHaveClass(/^text-sm/)
expect(deleteButton).not.toHaveClass(/^text-lg/)

Makes sense. Are you up to contributing this improvement?