vqc1909a

CHEAT SHEET TESTING LIBRARY REACT

Testing Library React is a library that allows us to test React components in a more user-friendly way, simulating the behavior of a user interacting with the component.

1. Here we have all the objects of the @testing-library/react package

Object	Description	Example
render	is used to render the component in a virtual DOM, so we can test it without having to render it in the real DOM.	const {container} = render(<CounterApp value={initialValue} />); expect(container).toMatchSnapshot();
screen	is a global object that contains all the queries that we can use to get the elements of the component rendered previously with render.	render(``); expect(screen.getByText(initialValue)).toBeTruthy();

vqc1909a

CHEAT SHEET JEST

Jest is a JavaScript testing framework that runs in a Node.js environment, so, if you use versions below 18, probably you need to set additional configures in the file jest.config.js because not recognized me the sentence fetch in versions below 18 to the execute the tests, otherwise is not neccesary to configure nothing.

1. Here we have all the methods of the sentence expect that i've gotten

   NOTE: the .not modifier is used to negate an assertion. It allows you to test that something does not meet a specific condition. You can chain .not before any Jest matcher to invert its behavior.

      expect('team').not.toMatch(/I/)

vqc1909a

Instalaciones recomendadas - Curso de Next.js

Necesarias

• Visual Studio Code

vqc1909a

Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

1. Instalaciones:

   yarn add -D @babel/core @babel/preset-env @babel/preset-react jest babel-jest react-test-renderer @types/jest @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom

2. Opcional: Si usamos Fetch API en el proyecto:

vqc1909a

Instalaciones recomendadas - Curso de React Pro

Instalaciones Necesarias

• Visual Studio Code

• Postman

• Mongo Compass

vqc1909a

Steps to set up jest in vite react project with typescript

1. Packages to install to work with javascript

   yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript jest babel-jest @types/jest @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom react-test-renderer

2. Packages to install to work with typescript