False positive for testing-library/await-async-query?

[luhmann]

Problem

I upgraded from version 3.10.2 to version 4.1.2 and am now getting errors for await-async-query that I cannot really explain. I read the migration guide to v4 and as far as I can see there is nothing wrong with my code. So I thought I would open this issue.

This is a minimal example of the issue, it popped up all over my codebase

// import from custom-module
import { render, screen } from 'mocks/test-utils'
import userEvent from '@testing-library/user-event'

// I have an object of reusable testdata
const testData = {
  name: 'Theodore Tester',
  email: '[email protected]',
  password: 'extremeSecret',
}

// ... and one of reusable selectors
const selectors = {
  username: () => screen.findByRole('textbox', { name: /username/i }),
  email: () => screen.findByRole('textbox', { name: /e-mail/i }),
  password: () => screen.findByLabelText(/password/i),
}

// which I use in a test
test('when a valid form is submitted, then a success notification is displayed', async () => {
  render(<CreateNewAdminUserPage />)
  userEvent.type(await selectors.username(), testData.name)
  userEvent.type(await selectors.email(), testData.email)
  userEvent.type(await selectors.password(), testData.password)

  // ... more test code and assertions
})

With 4.1.2 I get linting errors for await-async-query on my testdata, but only on some of it:

As you can see in the screenshot there is not linting error on testData.name, but there are on testData.email and testData.password.

What I cannot figure out is:

1. Why I see the error in the first place. To my understanding I handled the promises as expected in the rule
2. Why the error is indicated on my testData-object, which does not use promises
3. Why it is only reported for some of its properties

What I tried

• Switch off all aggressive reporting as described here: https://github.com/testing-library/eslint-plugin-testing-library#switching-all-aggressive-reporting-mechanisms-off => no change
• Configuring my custom-utils-module as described here: https://github.com/testing-library/eslint-plugin-testing-library#testing-libraryutils-module => no change
• Switch to getByRole-Queries instead of findByRole => fixes the issue, but is not really what I want

Versions/Config

npm ls eslint-plugin-testing-library
-- [email protected]

Config

{
      files: ['*.test.{tsx,ts}'],
      extends: ['plugin:jest-dom/recommended', 'plugin:testing-library/react', 'plugin:jest/recommended'],
      plugins: ['jest-dom', 'testing-library', 'jest'],
      rules: {
        'jest/valid-title': ['off'],
        'jest/expect-expect': [
          'error',
          {
            assertFunctionNames: ['expect', 'assert*'],
          },
        ],
        'testing-library/custom-queries': ['off'],
        'testing-library/utils-module': ['off'],
        'testing-library/custom-renders': ['off'],
      },
  },

Thank you for your help!

[Belco90]

Hi @luhmann! Thank you for your detailed explanation of the issue, it's really helpful.

This is a legitimate bug indeed! eslint-plugin-testing-library should report your wrappers around findBy* too, which is fine, but your wrappers are handling the returned promise properly so the rule shouldn't complain there. Also, the location of the error is really weird, apart from the fact is only complaining in some of them.

I'll take care of this one and get back when I find something in the upcoming days. Thanks!

[github-actions]

🎉 This issue has been resolved in version 4.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[eppisapiafsl]

We still get the false positive when using findBy queries from an Instance in the latest version

The findByType doesn't return a promise

const modal = screen.getByTestId("container").findByType(Modal)

[Belco90]

@eppisapiafsl That's not exactly the same problem. It was reported in #673.

[eppisapiafsl]

Thanks @Belco90