Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC]: testing-library-eslint-plugin/prefer-query-matchers #66

Open
MattAgn opened this issue Sep 28, 2023 · 3 comments
Open

[RFC]: testing-library-eslint-plugin/prefer-query-matchers #66

MattAgn opened this issue Sep 28, 2023 · 3 comments
Labels
⭐ enhancement New feature or request 📏 eslint-plugin Issue concerning the eslint plugin

Comments

@MattAgn
Copy link

MattAgn commented Sep 28, 2023

Why?

This rules helps ensure that we use getBy matchers when we want to assert element exists, are check, are accessible etc and queryBy only when elements don't exist. This is our standard for clear code and easy debugging in tests.

Issues so far:

  • it does not seem to work with findBy for now
  • nor does it wok with "not" assertions (I'd like to use queryBy only for "not.toBeOnTheScreen"

Rule Documentation 📜

https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-query-matchers.md

Config Selection 🛠

tests

(Optional) Additional Details 📝

Here is a possible configuration for this rule

    'testing-library/prefer-query-matchers': [
      2,
      {
        validEntries: [
          { matcher: 'toBeChecked', query: 'get' },
          { matcher: 'toHaveAccessibleName', query: 'get' },
          { matcher: 'toBeBusy', query: 'get' },
          { matcher: 'toBeSelected', query: 'get' },
          { matcher: 'toBeExpanded', query: 'get' },
          { matcher: 'toBePartiallyChecked', query: 'get' },
          { matcher: 'toHaveDisplayValue', query: 'get' },
          { matcher: 'toHaveTextContent', query: 'get' },
          { matcher: 'toHaveStyle', query: 'get' },
          { matcher: 'toHaveProp', query: 'get' },
          { matcher: 'toContainElement', query: 'get' },
          { matcher: 'toBeEnabled', query: 'get' },
          { matcher: 'toBeDisabled', query: 'get' },
          { matcher: 'toBeEmptyElement', query: 'get' },
        ],
      },
    ],
@MattAgn MattAgn added ⭐ enhancement New feature or request 📏 eslint-plugin Issue concerning the eslint plugin labels Sep 28, 2023
@pierrezimmermannbam
Copy link
Contributor

I'm not sure I understand correctly. What you mention in "issues so far" are issues with the actual configuration of this plugin? Or with your proposal? Because we have already the perfer presence queries rule which makes sure we use getBy and queryBy properly. This rule does have an issue though which is it doesn't work with toBeOnTheScreen because it's a rather new matcher but I think the best solution would be to make a PR on the testing library eslint plugin to add proper support for toBeOnTheScreen, wdyt?

@MattAgn
Copy link
Author

MattAgn commented Sep 28, 2023

Indeed I forgot about "prefer presence queries" but from what I see, the list of matchers is rather thin (toBeInTheDocument, toBeDefined, toBeTruthy) whereas this new rule enables you to add any matcher you want.

@pierrezimmermannbam
Copy link
Contributor

That's interesting but if it fails when using findby queries I think it's too big of an issue, is there no way to update the config to make it work?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⭐ enhancement New feature or request 📏 eslint-plugin Issue concerning the eslint plugin
Projects
None yet
Development

No branches or pull requests

2 participants