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 only compatible with Vue Testing Library frameworks.

Because Vue applies DOM updates asynchronously during re-renders, the 

 functions. To ensure that the DOM is properly updated in response to an event in a test, it's recommended to always handle the 

 rules we have seen before, will report unhandled promises; this time for all the 

 rule reports an error, you'll see one of the following messages:

 wrapper over fire event method must be handled

 rules we learnt before; by handling the promises returned by 

 methods, which can be done in these ways:

---
title: await-fire-event rule
description: Understanding the errors reported by the rule `await-fire-event`
isPublicLesson: false
---

# `await-fire-event` rule

:::caution

This rule is only compatible with Vue Testing Library frameworks.

:::

## Understanding the rule

Because Vue applies DOM updates asynchronously during re-renders, the `fireEvent` utils are re-exported as `async` functions. To ensure that the DOM is properly updated in response to an event in a test, it's recommended to always handle the `Promise` returned by `fireEvent` utils.

This rule, in the same way as the other `await-async-*` rules we have seen before, will report unhandled promises; this time for all the `fireEvent` methods.

When `await-fire-event` rule reports an error, you'll see one of the following messages:

> Promise returned from `fireEvent.{ method-name }` must be handled
>
> Promise returned from `fireEvent.{ wrapper-function-ame }` wrapper over fire event method must be handled

## How to fix the errors reported

Same fix as the other `await-async-*` rules we learnt before; by handling the promises returned by `fireEvent` methods, which can be done in these ways:

-   Using the `await` operator
-   Returning it from a function (in this case, that particular function will be analyzed by this rule too)
-   Wrapping it within `Promise.all` or `Promise.allSettled` methods
-   Calling its `.then` method
-   Chaining `.resolves` or `.rejects` from jest

Since this rule only applies to Vue Testing Library, we have generated a new demo app for this lesson written in Vue, which looks as simple as this:

![Vue logo in the middle, with a count and an "increment" button below](https://api.newline.co/assets/protected/courses/master-writing-testing-library-tests-using-eslint-plugin-testing-library/module_03/lesson_03.04/protected/vue-app.png)

Then, we have added a simple test to check the increment feature over the count:

```javascript { actualFilename=protected/demo-app/src/lesson/example.test.js endChar=400 endLine=16 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.04/protected/demo-app/src/lesson/example.test.js }
import { test, expect } from 'vitest';
import { render, fireEvent, screen } from '@testing-library/vue';
import App from '../App.vue';

Understanding the errors reported by the rule `await-fire-event`