Course Introduction

Introduction

Introduction to module 1 - Plugin features and set up

Intro to module 1

Main features and options

In this course we won't be building an app from scratch, but fixing existing examples and apps containing errors. We need to download and setup the provided sample codes to be able to work with them in the corresponding lessons.

Working with the provided sample codes

Get instant feedback by setting ESLint in your code editor

Integrating ESLint into your code editor

Install and configure eslint-plugin-testing-library in your codebase

Setting the plugin up in your project

The advanced config to lint only what's necessary

Run the plugin only on test files

Guidelines to migrate from a previous version to the latest v5

Migrating the plugin to v5

How to take advantage of the plugin when working in a Create React App project

Using the plugin in a Create React App project

Plugin features and set up

Introduction to module 2 - Rules for following best practices

Intro to module 2

Understanding the errors reported by the rule `no-manual-cleanup`

no-manual-cleanup rule

Understanding the errors reported by the rule `prefer-screen-queries`

prefer-screen-queries rule

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

no-await-sync-query rule

Rules for following best practices

Rules for preventing errors

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

 but you are still using v3 or v4 of the plugin: this lesson will be helpful for you. Otherwise, you can skip it since we are going to see how to migrate to v5.

Version 3 of the plugin is probably the most famous one since it was included in Create React App v4. Since this version, two new majors have been released but there are people still migrating to the most recent one. In this lesson, we are going through the changes on v4 and v5, and how to update to the latest.

This is the list of features and rules introduced in V4:

This is the list of changes that may break your current setup after upgrading to v4:

---
title: Migrating the plugin to v5
description: Guidelines to migrate from a previous version to the latest v5
isPublicLesson: true
privateVideoUrl: https://fullstack.wistia.com/medias/jxx3j1pj33
---

# Migrating the plugin to v5

If you are already familiar with the `eslint-plugin-testing-library` but you are still using v3 or v4 of the plugin: this lesson will be helpful for you. Otherwise, you can skip it since we are going to see how to migrate to v5.

Version 3 of the plugin is probably the most famous one since it was included in Create React App v4. Since this version, two new majors have been released but there are people still migrating to the most recent one. In this lesson, we are going through the changes on v4 and v5, and how to update to the latest.

## From v3 to v4

### Features

This is the list of features and rules introduced in V4:

-   New rules:

    -   `no-container`
    -   `no-wait-for-multiple-assertions`
    -   `no-node-access`
    -   `no-promise-in-fire-event`
    -   `no-wait-for-side-effects`
    -   `prefer-user-event`
    -   `render-result-naming-convention`
-   Detection of Testing Library utils improved and more consistent across the whole plugin
-   Aggressive Reporting mechanism
-   Shared Settings
-   Tons of errors fixed and internal validations added

### Breaking changes

This is the list of changes that may break your current setup after upgrading to v4:

-   Minimum ESLint version required is 7.5 now
-   `recommended` preset has been renamed to `dom`
-   `no-promise-in-fire-event` rule enabled in dom, angular, react and vue Shareable Configs
-   `no-wait-for-empty-callback` rule enabled in dom, angular, react and vue Shareable Configs
-   `prefer-screen-queries` rule enabled in dom, angular, react and vue Shareable Configs
-   `no-container` rule enabled in angular, react and vue Shareable Configs
-   `no-node-access` rule enabled in angular, react and vue Shareable Configs
-   `render-result-naming-convention` rule enabled in angular, react and vue Shareable Configs
-   `no-debug` rule changed from "warning" to "error" in angular, react, and vue Shareable Configs
-   `renderFunctions` option has been removed from `no-debug` and `no-render-in-setup` in favor of Aggressive Reporting feature
-   `customQueryNames` option has been removed from `prefer-explicit-assert` in favor of the Aggressive Reporting feature

Mario Beltrán Alarcón

If you are already familiar with the ESLE implagging testing library but you

using version 3 or version 4 of the plugin, this lesson will be helpful for you

Otherwise, you can skip it since we are going to see how to migrate up to

Version 3 of the plugin is probably the most famous one since it was included

After this version, two new measures have been released but there are people

In this lesson, we are going to see briefly the migration guides for version 4

In the proper doc located at the ESLE implagging testing library documentation,

In here, you have the overview where the breaking changes, new features added.

In the written version of this lesson, you will find the actual migration steps

need to follow to migrate from version 3 to version 4.

They are quite straightforward, so if you are interested in migrating to

In the migration guide for version 5 in ESLE implagging testing library

you will find again a list of the changes introduced in version 5 and some

Again, in the written version of this lesson, you will find the migration steps