Curso de React Testing Library
Curso de React Testing Library

Fundamentos del Testing en React

1

Importancia del Testing en el Desarrollo de Software

2

Configuración del entorno de testing en React

3

Introducción a los Tests:Tu primer test en React

Estrategias de Testing en React

4

Testing de Componentes UI: Conceptos Básicos

5

Table Driven Testing en React

6

Desarrollo Guiado por Pruebas (TDD) en React

7

Mocks en Testing

Testing de Flujos de Usuario en React

8

Testing a un Proceso de Autenticación (Parte 1)

9

Testing a un Proceso de Autenticación (Parte 2)

10

Testing de Gestión de Datos con Mocks

11

Testing de Componentes Condicionales con data-testid

Testing de Hooks en React

12

SOLID y Refactorización de Hooks

13

Testing de Hooks con Mocks

14

Testing de Hooks con Spies

Pruebas de Integración y APIs en React

15

Testing de APIs Externas con MSW (Parte 1)

16

Mock Service Worker (MSW)

17

Testing de APIs Externas con MSW (Parte 2)

Reflexiones sobre Testing en React

18

Innovación en Testing con IA

19

Test Coverage en React

20

Estrategias de Testing: Cuándo no debes hacer Testing

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
19 Hrs
4 Min
37 Seg
Curso de React Testing Library

Curso de React Testing Library

Wilmer Javier Garzon Cabezas

Wilmer Javier Garzon Cabezas

Desarrollo Guiado por Pruebas (TDD) en React

6/20
Recursos

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Juan Jose Bernal Villamarin

Juan Jose Bernal Villamarin

hace 13 días
Usando TDD lo cree así: 1. src/TodoList/TodoList.test.tsx ```js import { describe, it, expect } from 'vitest'; import { render, screen, fireEvent, act } from '@testing-library/react'; import TodoList from './TodoList'; describe('<TodoList />', () => { it('should display input to enter Todo activity ', () => { render(<TodoList />); const input = screen.getByPlaceholderText('Enter Todo Activity'); expect(input).toBeInTheDocument(); }); it('should display button to add Todo', () => { render(<TodoList />); const button = screen.getByText('Add Todo'); expect(button).toBeInTheDocument(); }); it('should display ul empty at the begin', () => { render(<TodoList />); const ul = screen.getByRole('list'); expect(ul).toBeEmptyDOMElement(); }); it('should add todo to the list', async () => { render(<TodoList />); const input = screen.getByPlaceholderText('Enter Todo Activity'); fireEvent.change(input, { target: { value: 'Learn Vitest' } }); const button = screen.getByText('Add Todo'); await act(async () => { fireEvent.click(button); }); const ul = screen.getByRole('list'); expect(ul).not.toBeEmptyDOMElement(); expect(ul).toContainHTML('
  • Learn Vitest
    • '); expect(screen.getByText('Learn Vitest')).toBeInTheDocument(); }); }); ```import { describe, it, expect } from 'vitest';import { render, screen, fireEvent, act } from '@testing-library/react';import TodoList from './TodoList';describe('\<TodoList />', () => { it('should display input to enter Todo activity ', () => { render(*\<TodoList* */>*); const input = screen.getByPlaceholderText('Enter Todo Activity'); expect(input).toBeInTheDocument(); }); it('should display button to add Todo', () => { render(*\<TodoList* */>*); const button = screen.getByText('Add Todo'); expect(button).toBeInTheDocument(); }); it('should display ul empty at the begin', () => { render(*\<TodoList* */>*); const ul = screen.getByRole('list'); expect(ul).toBeEmptyDOMElement(); }); it('should add todo to the list', async () => { render(*\<TodoList* */>*); const input = screen.getByPlaceholderText('Enter Todo Activity'); fireEvent.change(input, { target: { value: 'Learn Vitest' } }); const button = screen.getByText('Add Todo'); await act(async () => { fireEvent.click(button); }); const ul = screen.getByRole('list'); expect(ul).not.toBeEmptyDOMElement(); expect(ul).toContainHTML('\
  • Learn Vitest\
    • '); expect(screen.getByText('Learn Vitest')).toBeInTheDocument(); }); }); 1. src/TodoList/TodoList.tsx ```js import React, {useState} from 'react'; const TodoList = () => { const [todoValue, setTodoValue] = useState(""); const [list, setList] = useState<string[]>([]); const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { setTodoValue(e.target.value); } const addTodo = () => { setList([...list, "Learn Vitest"]); } return (
    <input type="text" placeholder="Enter Todo Activity" value={todoValue} onChange={handleChange}/> <button onClick={addTodo}>Add Todo</button>
      { list.map((item, index) => (
    • {item}
      • )) }
    ); } export default TodoList; ```import React, {useState} from 'react'; const TodoList = () => { const \[todoValue, setTodoValue] = useState(""); const \[list, setList] = useState\<string\[]>(\[]); const handleChange = (e: React.ChangeEvent\<HTMLInputElement>) => { setTodoValue(e.target.value); } const addTodo = () => { setList(\[...list, "Learn Vitest"]); } return ( *<*div*>* *<*input type="text" placeholder="Enter Todo Activity" value={todoValue} onChange={handleChange}*/>* *<*button onClick={addTodo}*>*Add Todo*\</*button*>* *<*ul*>* { list.map((item, index) => ( *<*li key={index}*>*{item}*\</*li*>* )) } *\</*ul*>* *\</*div*>* );} export default TodoList;