False positive with `await-async-query` when followed by destructuring without declaration

Have you read the Troubleshooting section?

Yes

Plugin version

v5.6.0

ESLint version

v7.32.0

Node.js version

16.31.1

package manager and version

yarn 1.22.19

Operating system

macOS Monterey

Bug description

The rule await-async-query identifies error when an awaited query is followed by a destructuring array without variable declaration and semicolons is disallowed.

I have this false positive when trying to fix prefer-destructuring (rule which we have enabled) on the next line.

    // ...
    buttons = await screen.findAllByRole('button')
    ([removeButton] = buttons)
    userEvent.click(removeButton)
    // ...

Steps to reproduce

1. Declare a variable;
2. Call test-library query which returns array (findAll*) with await;
3. Assign the value first returned value from de query to the previously declared variable using destructuring;

Error output/screenshots

ESLint configuration

module.exports = { parser: ‘babel-eslint’, rules: { ‘semi’: [‘error’, ‘never’], ‘prefer-destructuring’: ‘warn’, ‘testing-library/await-async-query’: ‘error’, }, plugins: [‘testing-library’], }

Rule(s) affected

• testing-library/await-async-query
• prefer-destructuring

Anything else?

No response

Do you want to submit a pull request to fix this bug?

No

[sjarva]

Okay, this was an interesting issue to look at.

This is related to how JavaScript handles automatic semicolon insertion (ASI). As described by Eslint’s semi rule:

In short, as once described by Isaac Schlueter, a \n character always ends a statement (just like a semicolon) unless one of the following is true:

1. The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or ,.)
2. The line is -- or ++ (in which case it will decrement/increment the next token.)
3. It is a for(), while(), do, if(), or else, and there is no {
4. The next line starts with [, (, +, *, /, -, ,, ., or some other binary operator that can only be found between two tokens in a single expression.

As the destructuring line ([removeButton] = buttons) starts with (, JavaScript does not insert a semicolon before it. If we would remove the brackets around the destructuring, the line would still start with [, and there would be no semicolon either.

Without the semicolon, AST sees the destructuring ([removeButton] = buttons) as an argument to a CallExpression. Since this kind of syntax (screen.findAllByRole('text')('somethingElse')) is not valid testing-library syntax, there aren’t unit tests (at least for this rule) with this syntax, and therefore this rule reports this as a false positive.

@Belco90 what do you think, should the rule handle this type of edge case?

P.S. Another workaround is to declare the removeButton on the next line:

const buttons = await screen.findAllByRole('button')
const [removeButton] = buttons
userEvent.click(removeButton)

[siminino]

Thanks @Belco90, A quick workaround for who is facing this issue is adding semicolon on the beginning of destructuring line. Obs: I don’t know if this workaround is going to work for any other rules combination.

    // ...
    buttons = await screen.findAllByRole('button')
    ;([removeButton] = buttons)
    userEvent.click(removeButton)
    // ...