Notification Dismissal Component Tests

Problem/Feature Description

A web app team has built a NotificationCenter component that shows a list of in-app notifications. Each notification can be dismissed individually with a close button. When all notifications are dismissed, a "No notifications" empty state message appears. The component also has a "Clear all" button that removes every notification at once.

The team has been having trouble with flaky tests: some tests use synchronous assertions that fire before React has finished updating state, causing intermittent failures. Others throw unexpected errors when checking whether dismissed items have disappeared.

You have been asked to write a reliable test suite for the NotificationCenter component that handles state transition assertions correctly.

Output Specification

Write a test file NotificationCenter.test.tsx that tests the NotificationCenter component provided below. Tests should cover:

• The initial list of notifications is rendered
• Dismissing a single notification removes it from the list
• After all notifications are dismissed, the empty-state message appears
• The "Clear all" button removes all notifications at once

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: NotificationCenter.tsx =============== import React, { useState } from 'react';

interface Notification { id: number; message: string; }

const INITIAL_NOTIFICATIONS: Notification[] = [ { id: 1, message: 'Your export is ready to download' }, { id: 2, message: 'Team member Alice joined your workspace' }, { id: 3, message: 'Scheduled maintenance on Sunday at 2am UTC' }, ];

export function NotificationCenter() { const [notifications, setNotifications] = useState<Notification[]>(INITIAL_NOTIFICATIONS);

function dismiss(id: number) { setNotifications((prev) => prev.filter((n) => n.id !== id)); }

function clearAll() { setNotifications([]); }

return ( <section aria-label="notifications"> <h2>Notifications</h2> {notifications.length === 0 ? ( <p>No notifications</p> ) : ( <> <ul> {notifications.map((n) => ( <li key={n.id}> {n.message} <button aria-label={dismiss ${n.message}} onClick={() => dismiss(n.id)}> ✕ </button> </li> ))} </ul> <button onClick={clearAll}>Clear all</button> </> )} </section> ); }