Tengo un componente en el que el estado se actualiza según la respuesta de la llamada a la API. Puedo probar si los datos devueltos por la API se representan en la pantalla o no. Pero no sé cómo probar que se muestra un mensaje adecuado (es decir, mensaje de error) cuando falla la llamada a la API.

Componente :

 import React, { useState } from "react"; import { getTodos } from "./Api"; interface responseType { completed: boolean; id: number; title: string; userId: number; } const Todo: React.FC = () => { const [isSuccess, set_isSuccess] = useState(false); const [errorMessage, set_errorMessage] = useState(''); const [data, set_data] = useState<responseType[]>([]); const handleFetchData = () => { getTodos() .then((response) => { if (response) { set_isSuccess(true); set_data(response.slice(0, 4)) } }) .catch((error) => { console.log(error); set_errorMessage('Failed to fetch data'); }); }; return ( <> <h2>Demo App</h2> <button onClick={handleFetchData}>Click</button> <div> {isSuccess ? data.map((val) => val.title) : errorMessage} </div> </> ) } export default Todo;

En el código anterior, getTodos() es la función para realizar la llamada a la API. Puedo probar el escenario cuando la llamada API es exitosa. A continuación se muestra el archivo de prueba.

 import { render, screen, waitFor } from '@testing-library/react'; import Todo from './Todo'; import userEvent from '@testing-library/user-event'; jest.mock('./Api', () => ({ getTodos: jest.fn(() => Promise.resolve([ { completed: false, id: 1, title: "a sample item", userId: 1 }]) ) }) ) it('data fetched successfully', async () => { render(<Todo />) const btn = screen.getByRole('button', { name: 'Click' }) userEvent.click(btn); await waitFor(() => screen.getByText(/a sample item/i)); })

Quiero escribir un caso de prueba similar en el mismo archivo para verificar si el mensaje 'Error al obtener datos' se muestra en la pantalla cuando falla la llamada a la API (se ejecuta el bloque de captura).