no-await-sync-query rule

Understanding the errors reported by the rule `no-await-sync-query`

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the Master Testing Library with ESLint Plugin course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Master Testing Library with ESLint Plugin, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Master Testing Library with ESLint Plugin

  • [00:00 - 00:19] This rule is compatible and enabled for all testing library frameworks supported by deploying. This means it's automatically enabled with the Test delivery React preset, but if for whatever reason we need to enable or disable it manually, you can do this like this.

    [00:20 - 00:32] But as we mentioned, we don't need to switch it off or on, because it's automatically enabled for us with this preset. Queries provided by Test delivery can be split into two categories, synchronous and asynchronous.

    [00:33 - 00:45] The query by and get by queries belong to the first group, while defined by queries are part of the second group. For this rule, we are going to focus on the former group, which is query by and get by queries.

    [00:46 - 00:59] The sync queries don't return any promise, they just return the found element or null instantly or throw an error in some cases. As they don't return any promise, there is nothing to wait when calling this type of queries.

    [01:00 - 01:16] However, it's common to wait these queries by mistake, probably because you wrote a find by query recently or just because you are still not experienced with Test delivery yet. This rule will prevent you from awaiting the result obtained from get by and query by queries like this one.

    [01:17 - 01:30] Waiting for a sync query won't cause any actual error, but it's recommended not to await them, so you are aware that you are testing a synchronous behavior. This might help you realize if you are querying the elements with the right approach or not.

    [01:31 - 01:41] If we go to the test sample file, we will find again another test implemented. In here, we can see a simple test that rendered the apps.

    [01:42 - 01:55] I wait for an element with the text in here and then check this element is in the document. We can see our code editor is already highlighting an error reported by ESLint.

    [01:56 - 02:04] This is an error reported by our rule and this is the error you will usually see with it. Fixing the error reported by this rule wouldn't be simple.

    [02:05 - 02:23] It's just a matter of removing the await, so we don't await for the result obtained by this query. Since now there is no async behavior in our test, we can remove the async operator from our test function and that's it.

    [02:24 - 02:34] We should be enabled. The synchronous queries are part of the test delivery code, so this rule is always recommended and that's why it's already enabled in all the shareable config provided by the plugin.

    [02:35 - 02:56] We are going to leave you trying to figure out how to fix the error reported in the practice.test.js.x file. [shutter sound]