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

vqc1909a

Instalaciones recomendadas - Curso de React Pro

Instalaciones Necesarias

• Visual Studio Code

• Postman

• Mongo Compass

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 Next.js

Necesarias

• Visual Studio Code

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

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

Node JS TDD (Test Driven Development)

1. Install the following dependencies

     yarn add express mongoose dotenv 

2. Install the following development dependencies

     yarn add nodemon mongodb-memory-server jest supertest -D

vqc1909a

Login | Authentication

As User Management App user, I want a login page as a way of have a protected access to the app.

Acceptance Criteria (AC):

• There must be a login page.
• The login page must have a form with the following fields: email, password and a submit button.
• The email and password inputs are required.

vqc1909a

Authorization

As admin, i want to have full access to the company app modules: employees page and admin page as a way of operate them.

Acceptance Criteria:

• The admin must be redirected to the admin page after login.
• The admin username should be displayed on the common navbar.
• The admin must have access to the employees page.
• The admin must have access to delete the employee button.

vqc1909a

METHODS JAVASCRIPT

It's a list of the common methods javascript for a technical tests

String

Method	Description	Example
.substring	returns the part of this string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.	const str = "Mozilla"; str.substring(1, 3); // Expected output: "oz" str.substring(2); // Expected output: "zilla"
.search	string method that searches for a match between a regular expression and a string. It returns the index of the first match, or -1 if the match is not found.	const str = "Hello world!"; const index = str.search(/world/); // returns 6