Tengo un componente que realiza una búsqueda de datos muy básica. Una vez que se obtienen estos datos, los usuarios pueden interactuar y hacer clic en los elementos de una lista. Cuando se hace clic en un elemento, se muestra en la parte superior del componente con una descripción como "elemento activo".

Me gustaría probar la funcionalidad de hacer clic asegurándome de que un elemento se pueda configurar como activo y también eliminarlo. Sin embargo, no estoy seguro de cómo hacerlo, ya que se basa en datos de una API. ¿Algunas ideas?

Código de componente

 interface Item { title: string; description: string; } const Home: NextPage = () => { const [items, setItems] = useState<Item[]>([]); const [activeItem, setActiveItem] = useState<Item | null>(null); const fetchItems = async () => { try { const res = await axios.get<Item[]>('http://localhost:3090/api/items'); setItems(res.data); } catch (error) { console.log(error); } }; const handleActiveItem = (item: Item) => { if (activeItem?.title === item.title) { setActiveItem(null); } else { setActiveItem(item); } }; useEffect(() => { fetchItems(); }, []); return ( <div> {activeItem && ( <div data-testid="active-item"> <h1>{activeItem.title}</h1> <p>{activeItem.description}</p> </div> )} <ul> {items.map((item: Item) => ( <li key={item.title} onClick={() => handleActiveItem(item)}> {item.title} </li> ))} </ul> </div> ); };

Código de prueba

 describe('Home', () => { it('matches snapshot', () => { const tree = renderer.create(<Home />).toJSON(); expect(tree).toMatchSnapshot(); }); render(<Home />); it('Initially there is no active item', () => { const activeItem = screen.queryByTestId('active-item'); expect(activeItem).not.toBeInTheDocument(); }); it('When an item is clicked in the list, it becomes the active item', () => { // }); it('If there is an active item and it is clicked in the list, active item is emptied', () => { // }); });