ESLint extension: eslint-plugin-testing-library
https://github.com/testing-library/eslint-plugin-testing-library
Await async components updates
Flaky alert: await wait(100)
Useful functions:
await waitForElementToBeRemoved(() => screen.getByTestId('loading-spinner'))
await waitForNextUpdate()
await waitFor(() => expect(queryByText('All')).toBeNull())
await waitForValueToChange(() => result.current.comments)
Responding to the act warning correctly
To prepare a component for assertions, wrap the code rendering it and performing updates inside an act() call. This makes your test run closer to how React works in the browser.
fireEvent is already wrapped in act inside, you get the warning because an update after fireEvent is not awaited.
To fix act warning, make sure you properly handle asynchronous actions!
Resources
https://kentcdodds.com/blog/common-mistakes-with-react-testing-library
Learnings from applying eslint plugin for testing library - whys
Avoid destructuring queries from render result, use screen.getByText instead
Saves time and line
Forbidden usage of render within testing framework beforeEach setup
Move rendering as close to assertion as possible
Prefer using queryBy* when waiting for disappearance
More specific error message