testing-library / testing-library/eslint-plugin-testing-library
Incorrect prefer-find-by autofix when using within inside waitFor
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 168
- Avg merge
- 15h 44m
- Merged PRs (30d)
- 14
Description
Plugin version
v5.0.3
ESLint version
v8.7.0
Node.js version
v16.13.1
npm/yarn version
pnpm v5.18.0
Operating system
macOS Big Sur 11.6.2
Bug description
await waitFor blocks with within and chained getBy... queries are not correctly autofixed
Steps to reproduce
The following snippet raises a prefer-find-by error
const btnProceed = await waitFor(() =>
within(screen.getByRole('dialog', { name: 'Confirmation' })).getByRole(
'button',
{ name: 'Proceed' },
),
)
Rule autofixer produces the following code, losing a query for the button itself
const btnProceed = await screen.findByRole('dialog', { name: 'Confirmation' })
Error output/screenshots
No response
ESLint configuration
'testing-library/await-async-query': ['warn'],
'testing-library/await-async-utils': ['warn'],
'testing-library/no-await-sync-query': ['warn'],
'testing-library/no-debugging-utils': ['warn'],
'testing-library/no-dom-import': ['warn'],
'testing-library/no-manual-cleanup': ['warn'],
'testing-library/no-wait-for-empty-callback': ['warn'],
'testing-library/prefer-explicit-assert': ['warn', { includeFindQueries: false }],
'testing-library/prefer-find-by': ['warn'],
'testing-library/prefer-presence-queries': ['warn'],
'testing-library/prefer-screen-queries': ['warn'],
'testing-library/prefer-wait-for': ['warn'],
Rule(s) affected
testing-library/prefer-find-by
Anything else?
It should not be a difficult thing to fix, and I could submit a PR, however I'm not sure what's a better way to approach it.
Generally, there could be 3 different solutions:
- Do not trigger prefer-find-by for waitFor assertions like
within(screen.getBy...()).getBy...() - Autofix as
await within(await screen.findBy...(...)).findBy...(...) - Trigger an error but do not autofix such cases
Do you want to submit a pull request to fix this bug?
Yes, but need help
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the testing-library/prefer-find-by rule and reproduce the reported waitFor, within, and chained getByRole example. Inspect its autofix behavior, then add coverage showing that the dialog and Proceed button queries are both preserved; done means the rule no longer drops the chained button query.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, typescript
- Domain
- testing-qa, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100