React Testing Library for Beginners: React.js Testing Tutorial #3

Publicado el: 26 julio 2021
en el canal de: Bruno Antunes
14,220
448

In this video we'll learn how to use react testing library to query elements from the DOM and interact with those elements. We also use the user-events package from the react testing library ecosystem to make our interactions easier!

In the initial part of this video we will be adding tests to an existent component.

In the second part of the video, we will add a new feature to our component using TDD (Test Driven Development)

react testing library = @testing-library/react npm package

----
All the videos in this series (React.js Testing Tutorial):    • React.js Unit Testing and Integration Test...  
----
Join the channel to support my content:
   / @brunoantunespt  
----

----
GitHub Repository: https://github.com/bmvantunes/youtube...
----

----
Playground: https://testing-playground.com/
React Testing Library Query Priority: https://testing-library.com/docs/quer...
----

----
Video where we built the counter component:    • useState | React Hooks | React.js Tutorial #5  
----



From their docs:
--------
The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is:

So rather than dealing with instances of rendered React components, your tests will work with actual DOM nodes. The utilities this library provides facilitate querying the DOM in the same way the user would. Finding form elements by their label text (just like a user would), finding links and buttons from their text (like a user would). It also exposes a recommended way to find elements by a data-testid as an "escape hatch" for elements where the text content and label do not make sense or is not practical.

This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it.
-------

Timeline:
00:00 Agenda
01:03 TDD: Red, Green, Refactor
02:30 Intro to React Testing Library
03:45 The more your tests resemble the way your software is used,
the more confidence they can give you.
04:32 Queries and Priority
05:45 Automated Query Selector for us: Playground
07:27 Code
23:00 TDD: New Feature

----
#react #jest #ReactTestingLibrary
----

Follow me on:
Twitter:   / bmvantunes  
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn:   / bmvantunes  


En esta página del sitio puede ver el video en línea React Testing Library for Beginners: React.js Testing Tutorial #3 de Duración hora minuto segunda en buena calidad , que subió el usuario Bruno Antunes 26 julio 2021, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 14,220 veces y le gustó 448 a los espectadores. Disfruta viendo!