Course Introduction

Introduction

Intro to module 1

Main features and options

Working with the provided sample codes

Integrating ESLint into your code editor

Setting the plugin up in your project

Run the plugin only on test files

Migrating the plugin to v5

Using the plugin in a Create React App project

Plugin features and set up

Intro to module 2

no-manual-cleanup rule

prefer-screen-queries rule

no-await-sync-query rule

no-await-sync-events rule

no-container rule

no-node-access rule

no-render-in-setup rule

no-wait-for-multiple-assertions rule

prefer-explicit-assert rule

prefer-find-by rule

prefer-user-event rule

prefer-wait-for rule

prefer-query-by-disappearance rule

Rules for following best practices

Intro to module 3

no-dom-import rule

await-async-query rule

await-async-utils rule

await-fire-event rule

no-global-regexp-flag-in-query rule

no-promise-in-fire-event rule

no-wait-for-empty-callback rule

no-wait-for-side-effects rule

no-wait-for-snapshot rule

prefer-presence-queries rule

no-unnecessary-act rule

Rules for preventing errors

Intro to module 4

no-debugging-utils rule

render-result-naming-convention rule

consistent-data-testid rule

Auto-fixing ESLint problems

What is Aggressive Reporting?

Configuring the Aggressive Reporting

Rules for style guidelines & Advanced Features

Testing Library is a great bunch of utils to write tests for your UI. It has become the favorite testing choice of many users since it encourages you to write more maintainable and reliable tests, encourages best practices, and doesn't focus on implementation but behavior.

However, testing your app correctly with Testing Library is not always straightforward. _What query variant fits better for this situation? How should I check appearance/disappearance? What is the best way to handle async behaviors? Why am I seeing this particular error or warning? Why am I not getting the expected element?_ These are very typical questions while writing tests with Testing Library.

You are not alone! This course aims to help you master these situations with the assistance of `eslint-plugin-testing-library`: the official ESLint plugin for Testing Library.

The course will boost your Testing Library skills by using this plugin
as a companion when writing tests. You will get instant feedback by linting your tests code, so you can **follow best practices and anticipate common mistakes for Testing Library**, as well as better understand its utils and their main purposes.

Get ready to say goodbye to flaky tests!

Master writing Testing Library tests with eslint-plugin-testing-library by anticipating common mistakes and following best practices

Master Testing Library with ESLint Plugin

How to set up eslint-plugin-testing-library in your codebase

Getting ESLint feedback directly in your code editor and your terminal

ESLint advanced config for getting more granular control over the linting process

Better understanding of Testing Library errors

Following best practices for Testing Library tests

This rule is compatible with all Testing Library frameworks supported by this plugin.

This is another rule for something that might look obvious, but is quite easy to miss!

 methods, the first argument is always a DOM element. You can obtain those elements through 

 queries, but you need to await the latter. If you forget to do so, then you would be passing a 

 method, so it won't be able to fire the desired event over the expected element. This rule will prevent passing promises from 

DOM Testing Library added a mechanism to prevent this, so it throws an error if you pass a 

 rule reports an error, you'll see the following message:

 method, DOM Testing Library (or any other framework on top of it) will throw an error like this one:

---
title: no-promise-in-fire-event rule
description: Understanding the errors reported by the rule `no-promise-in-fire-event`
isPublicLesson: false
---

# `no-promise-in-fire-event` rule

:::tip

This rule is compatible with all Testing Library frameworks supported by this plugin.

:::

## Understanding the rule

This is another rule for something that might look obvious, but is quite easy to miss!

When using `fireEvent` methods, the first argument is always a DOM element. You can obtain those elements through `get*` or `find*` queries, but you need to await the latter. If you forget to do so, then you would be passing a `Promise` to the `fireEvent` method, so it won't be able to fire the desired event over the expected element. This rule will prevent passing promises from `find*` queries or new instances of `Promise` to any `fireEvent` util.

DOM Testing Library added a mechanism to prevent this, so it throws an error if you pass a `Promise` to any `fireEvent` method.

When `no-promise-in-fire-event` rule reports an error, you'll see the following message:

> A promise shouldn't be passed to a `fireEvent` method, instead pass the DOM element

## How to fix the errors reported

When we pass a `Promise` to any `fireEvent` method, DOM Testing Library (or any other framework on top of it) will throw an error like this one:

> Error: It looks like you passed a Promise object instead of a DOM node. Did you do something like `fireEvent.click(screen.findBy...` when you meant to use a `getBy` query `fireEvent.click(screen.getBy...`, or await the findBy query `fireEvent.click(await screen.findBy...`?

This error is actually providing the 2 different ways we can fix the errors reported by this rule!

-   Using a synchronous `get*` query to get our DOM element
-   Await the `Promise` returned by `find*` query to find our DOM element

We can see it in action for this simple example:

```javascript { actualFilename=protected/demo-app/src/lesson/example.test.jsx endChar=348 endLine=11 startChar=0 startLine=1 url=https&#x3A;//gitlab.com/fullstackio/books/master-writing-testing-library-tests-using-eslint-plugin-testing-library/module_03/lesson_03.06/protected/demo-app/src/lesson/example.test.jsx }
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { App } from '../App'

Understanding the errors reported by the rule `no-promise-in-fire-event`