React Testing para principiantes

React_Testing.md

React Tesing para principiantes

¿Cómo realizar las pruebas de la aplicación React?

import './App.css';
import Todo from './components/todo';
function App(){
	const todos = [
		{id: 1, description: 'Aprender a probar javascript', completed: false },
		{id: 2, description: 'Ir al gumnasio', completed: true },					
		{id: 3, description: 'limpiar la casa', completed: false }, 
	]
	return {
		<div className="App">
			{todos.map((todo) => {
				return <Todo todo={todo} />;
			})}
		</div>
	}
}
export default App;

El archivo Todo.js tiene el siguiente aspecto:

import React from 'react';
function Todo({ todo }) {
	return (
		<div data-testid={`NR-${todo?.id`}>
			<h1>{todo?.description</h1>
		</div>
	);
}
export default Todo;

parte fundamental de las pruebas.

npm i --save-dev @testing-library/react react-test-renderer

Vamos a la terminal una vez más y comenzar la prueba mediante la ejecución de un comando siguiente.

npm run test

Ahora vamos al archivo 'todo.test.js'.

import { render, screen, cleanup } from '@testing-library/react';
import Todo from '../todo';

afterEach(() => {
	cleanup();
})
test('should render component', () => {
	const todo = {
		id = 1,
		description: 'aprender a probar javascript',
		completed: false,
	}
	render(<Todo todo={todo} />);
	const todoElement = screen.getByTestId('NR-1');
	expect(todoElement).toBeInTheDocument();
	expect(todoElement).toHaveTextContent('aprender a probar javascript');
});

import { render,screen, cleanup } from '@testing-library/react';
import Todo from '../todo';
import renderer from 'react-test-renderer';

afterEach(() => {
});