@linktr.ee/messaging-react 4.4.7 → 4.5.0-rc-1788297811

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.7",
+  "version": "4.5.0-rc-1788297811",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.6.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788297811",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788297811",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/MediaPlayer.test.tsx

@@ -6,6 +6,7 @@ import {
   renderWithProviders,
   screen,
   waitFor,
+  userEvent,
 } from '../../test/utils'
 
 import MediaPlayer from './MediaPlayer'
@@ -119,6 +120,7 @@ describe('MediaPlayer', () => {
   })
 
   it('shows a manual play overlay after rejected playback and starts from a gesture', async () => {
+    const user = userEvent.setup()
     const play = vi.mocked(HTMLMediaElement.prototype.play)
     play.mockRejectedValueOnce(new Error('autoplay blocked'))
     const onContainerClick = vi.fn()
@@ -135,22 +137,23 @@ describe('MediaPlayer', () => {
 
     const overlay = await screen.findByRole('button', { name: 'Play preview' })
     expect(play).toHaveBeenCalledTimes(1)
-    fireEvent.click(overlay)
+    await user.click(overlay)
     await waitFor(() => expect(play).toHaveBeenCalledTimes(2))
     expect(onContainerClick).not.toHaveBeenCalled()
     expect(screen.queryByRole('button', { name: 'Play preview' })).toBeNull()
   })
 
   it('toggles from the container only with controls, while an override owns the click', async () => {
+    const user = userEvent.setup()
     const play = vi.mocked(HTMLMediaElement.prototype.play)
     const { rerender } = renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
     )
     const root = screen.getByTestId('media-player')
 
-    fireEvent.click(root)
+    await user.click(root)
     await screen.findByRole('button', { name: 'Pause' })
-    fireEvent.click(root)
+    await user.click(root)
     await screen.findByRole('button', { name: 'Play' })
     expect(play).toHaveBeenCalledTimes(1)
 
@@ -163,7 +166,7 @@ describe('MediaPlayer', () => {
         onContainerClick={onContainerClick}
       />
     )
-    fireEvent.click(root)
+    await user.click(root)
     expect(onContainerClick).toHaveBeenCalledTimes(1)
     expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument()
     fireEvent.keyDown(root, { key: 'Enter' })
@@ -206,11 +209,12 @@ describe('MediaPlayer', () => {
   })
 
   it('does not let the controls button bubble into the container toggle', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls />
     )
 
-    fireEvent.click(screen.getByRole('button', { name: 'Play' }))
+    await user.click(screen.getByRole('button', { name: 'Play' }))
     await screen.findByRole('button', { name: 'Pause' })
   })
 

package/src/components/AttachmentCard/Thumbnail.test.tsx

@@ -91,6 +91,7 @@ describe('AttachmentThumbnail', () => {
     expect(image).toHaveClass('opacity-0')
     fireEvent.load(image)
     expect(image).toHaveClass('opacity-100')
+    // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
     expect(container.firstElementChild).toHaveClass('aspect-video')
   })
 
@@ -126,6 +127,7 @@ describe('AttachmentThumbnail', () => {
     expect(contained).toHaveClass('opacity-0')
     fireEvent.load(contained)
     expect(contained).toHaveClass('opacity-100')
+    // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
     expect(container.firstElementChild).toHaveClass('aspect-video')
 
     rerender(
@@ -170,6 +172,7 @@ describe('AttachmentThumbnail', () => {
       )
       const darkImage = screen.getByRole('img', { name: 'Poster' })
       expect(darkImage).toHaveAttribute('src', OPTIMIZED_THUMBNAIL)
+      // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
       expect(view.container.firstElementChild).toHaveClass(
         'aspect-video',
         'bg-white/10'
@@ -186,6 +189,7 @@ describe('AttachmentThumbnail', () => {
         />
       )
       expect(screen.getByRole('img')).toHaveAttribute('alt', '')
+      // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
       expect(view.container.firstElementChild).toHaveClass(
         'aspect-video',
         'bg-black/5'

package/src/components/ChannelActionsMenu/ChannelActionsMenu.test.tsx

@@ -86,8 +86,10 @@ const defaultProps = () => ({
   participant: createParticipant(),
 })
 
-const openMenu = async () =>
-  userEvent.click(screen.getByRole('button', { name: 'More options' }))
+const openMenu = async () => {
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: 'More options' }))
+}
 
 describe('ChannelActionsMenu', () => {
   beforeEach(() => {
@@ -125,12 +127,13 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('closes the popover when Escape is pressed', async () => {
+    const user = userEvent.setup()
     renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
 
     await openMenu()
     expect(screen.getByText('Report')).toBeInTheDocument()
 
-    await userEvent.keyboard('{Escape}')
+    await user.keyboard('{Escape}')
 
     await waitFor(() => {
       expect(screen.queryByText('Report')).not.toBeInTheDocument()
@@ -138,6 +141,7 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('closes the popover when clicking outside', async () => {
+    const user = userEvent.setup()
     renderWithProviders(
       <div>
         <span data-testid="outside">outside</span>
@@ -148,7 +152,7 @@ describe('ChannelActionsMenu', () => {
     await openMenu()
     expect(screen.getByText('Report')).toBeInTheDocument()
 
-    await userEvent.click(screen.getByTestId('outside'))
+    await user.click(screen.getByTestId('outside'))
 
     await waitFor(() => {
       expect(screen.queryByText('Report')).not.toBeInTheDocument()
@@ -156,6 +160,7 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('calls onDeleteConversationClick and closes after deleting', async () => {
+    const user = userEvent.setup()
     const onDeleteConversationClick = vi.fn()
     renderWithProviders(
       <ChannelActionsMenu
@@ -165,7 +170,7 @@ describe('ChannelActionsMenu', () => {
     )
 
     await openMenu()
-    await userEvent.click(screen.getByText('Delete Conversation'))
+    await user.click(screen.getByText('Delete Conversation'))
 
     await waitFor(() => {
       expect(onDeleteConversationClick).toHaveBeenCalledOnce()
@@ -176,6 +181,7 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('calls onBlockParticipantClick and blocks the user', async () => {
+    const user = userEvent.setup()
     const onBlockParticipantClick = vi.fn()
     renderWithProviders(
       <ChannelActionsMenu
@@ -185,7 +191,7 @@ describe('ChannelActionsMenu', () => {
     )
 
     await openMenu()
-    await userEvent.click(screen.getByText('Block'))
+    await user.click(screen.getByText('Block'))
 
     await waitFor(() => {
       expect(onBlockParticipantClick).toHaveBeenCalledOnce()
@@ -206,6 +212,7 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('disables the block action until the blocked-status lookup resolves', async () => {
+    const user = userEvent.setup()
     let resolveBlockedUsers: (
       value: Array<{ blocked_user_id: string }>
     ) => void = () => {}
@@ -221,9 +228,9 @@ describe('ChannelActionsMenu', () => {
 
     // While the lookup is pending the action is disabled so a premature click
     // can't act on a stale block state.
-    const pendingBlock = screen.getByText('Block').closest('button')
+    const pendingBlock = screen.getByRole('button', { name: 'Block' })
     expect(pendingBlock).toBeDisabled()
-    await userEvent.click(pendingBlock as HTMLElement)
+    await user.click(pendingBlock)
     expect(blockUserMock).not.toHaveBeenCalled()
 
     // Once the lookup resolves (already blocked) the Unblock action is offered.
@@ -247,7 +254,7 @@ describe('ChannelActionsMenu', () => {
     // The lookup rejected, but the action recovers — Block becomes actionable
     // rather than staying stuck in the disabled spinner state.
     await waitFor(() => {
-      const block = screen.getByText('Block').closest('button')
+      const block = screen.getByRole('button', { name: 'Block' })
       expect(block).not.toBeDisabled()
     })
 
@@ -255,6 +262,7 @@ describe('ChannelActionsMenu', () => {
   })
 
   it('calls onReportParticipantClick and opens the report page', async () => {
+    const user = userEvent.setup()
     const onReportParticipantClick = vi.fn()
     const windowOpenSpy = vi
       .spyOn(window, 'open')
@@ -267,7 +275,7 @@ describe('ChannelActionsMenu', () => {
     )
 
     await openMenu()
-    await userEvent.click(screen.getByText('Report'))
+    await user.click(screen.getByText('Report'))
 
     await waitFor(() => {
       expect(onReportParticipantClick).toHaveBeenCalledOnce()

package/src/components/ChannelList/ChannelListContext.test.tsx

@@ -1,7 +1,7 @@
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi } from 'vitest'
 
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../test/utils'
 
 import {
   ChannelListProvider,
@@ -36,7 +36,8 @@ function ContextConsumer() {
 }
 
 describe('ChannelListContext', () => {
-  it('provides safe documented defaults without a provider', () => {
+  it('provides safe documented defaults without a provider', async () => {
+    const user = userEvent.setup()
     renderWithProviders(<ContextConsumer />)
 
     expect(screen.getByTestId('selected-channel')).toHaveTextContent(
@@ -48,10 +49,11 @@ describe('ChannelListContext', () => {
     )
     expect(screen.getByTestId('channel-preview')).toHaveTextContent('undefined')
     expect(screen.getByTestId('viewer-language')).toHaveTextContent('undefined')
-    expect(() => fireEvent.click(screen.getByRole('button'))).not.toThrow()
+    await user.click(screen.getByRole('button'))
   })
 
-  it('exposes the value supplied by a provider', () => {
+  it('exposes the value supplied by a provider', async () => {
+    const user = userEvent.setup()
     const onChannelSelect = vi.fn()
     const ChannelPreview = () => null
     const renderMessagePreview = () => 'preview'
@@ -81,7 +83,7 @@ describe('ChannelListContext', () => {
     expect(screen.getByTestId('channel-preview')).toHaveTextContent('provided')
     expect(screen.getByTestId('viewer-language')).toHaveTextContent('es')
 
-    fireEvent.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button'))
     expect(onChannelSelect).toHaveBeenCalledWith(channel)
   })
 })

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -3,7 +3,7 @@ import { act, createEvent, fireEvent } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../test/utils'
 import type { ChannelPreviewProps } from '../../types'
 
 import { ChannelListProvider } from './ChannelListContext'
@@ -136,7 +136,8 @@ describe('CustomChannelPreview', () => {
     expect(screen.getByRole('button')).toHaveClass('hover:bg-black/[0.02]')
   })
 
-  it('selects the channel by click and activation keys only', () => {
+  it('selects the channel by click and activation keys only', async () => {
+    const user = userEvent.setup()
     const channel = createMockChannel([])
     const onChannelSelect = vi.fn()
     renderWithProviders(
@@ -146,7 +147,7 @@ describe('CustomChannelPreview', () => {
     )
     const row = screen.getByRole('button')
 
-    fireEvent.click(row)
+    await user.click(row)
     fireEvent.keyDown(row, { key: 'Enter' })
     const spaceEvent = createEvent.keyDown(row, { key: ' ' })
     fireEvent(row, spaceEvent)
@@ -782,7 +783,8 @@ describe('CustomChannelPreview', () => {
     ).toBeInTheDocument()
   })
 
-  it('renders a custom channel preview with selection props from context', () => {
+  it('renders a custom channel preview with selection props from context', async () => {
+    const user = userEvent.setup()
     const channel = createMockChannel([])
     const onChannelSelect = vi.fn()
     const ChannelPreview = vi.fn(
@@ -818,7 +820,7 @@ describe('CustomChannelPreview', () => {
       </ChannelListProvider>
     )
 
-    fireEvent.click(
+    await user.click(
       screen.getByRole('button', { name: 'Selected channel-1 es active' })
     )
 

package/src/components/ChannelList/index.test.tsx

@@ -318,6 +318,7 @@ describe('ChannelList', () => {
       />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the component shell wrapper has no semantic query.
     expect(container.firstElementChild).toHaveClass(
       'messaging-channel-list',
       'h-full',

package/src/components/ChannelView.test.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import type { Channel } from 'stream-chat'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 
-import { renderWithProviders, screen, within } from '../test/utils'
+import { renderWithProviders, screen, userEvent, within } from '../test/utils'
 
 import { ChannelView } from './ChannelView'
 
@@ -266,7 +266,8 @@ describe('ChannelView', () => {
     expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
   })
 
-  it('renders the redesigned header button when onParticipantNameClick is provided', () => {
+  it('renders the redesigned header button when onParticipantNameClick is provided', async () => {
+    const user = userEvent.setup()
     const onParticipantNameClick = vi.fn()
     renderWithProviders(
       <ChannelView
@@ -284,7 +285,7 @@ describe('ChannelView', () => {
     expect(button).toContainElement(avatars[0])
     expect(screen.getByTestId('channel-actions-menu')).toBeInTheDocument()
 
-    button.click()
+    await user.click(button)
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
   })
 
@@ -357,7 +358,8 @@ describe('ChannelView', () => {
     )
   })
 
-  it('keeps message rows mounted while updating the outbound click handler', () => {
+  it('keeps message rows mounted while updating the outbound click handler', async () => {
+    const user = userEvent.setup()
     const firstHandler = vi.fn()
     const secondHandler = vi.fn()
     const { rerender: rerenderChannel } = renderWithProviders(
@@ -387,7 +389,7 @@ describe('ChannelView', () => {
     expect(customMessageMounts).toHaveBeenCalledOnce()
     expect(customMessageUnmounts).not.toHaveBeenCalled()
 
-    screen.getByTestId('custom-message').click()
+    await user.click(screen.getByTestId('custom-message'))
     expect(firstHandler).not.toHaveBeenCalled()
     expect(secondHandler).toHaveBeenCalledWith({
       id: 'automation-1',
@@ -443,14 +445,15 @@ describe('ChannelView', () => {
 
     expect(renderConversationFooter).toHaveBeenCalledWith(channel)
     expect(conversationFooter).toHaveTextContent('footer-channel-1')
-    expect(
-      messageList.compareDocumentPosition(conversationFooter) &
-        Node.DOCUMENT_POSITION_FOLLOWING
-    ).toBeTruthy()
-    expect(
-      conversationFooter.compareDocumentPosition(messageInput) &
-        Node.DOCUMENT_POSITION_FOLLOWING
-    ).toBeTruthy()
+    const regions = screen.getAllByTestId(
+      /message-list|conversation-footer|message-input/
+    )
+    expect(regions.indexOf(messageList)).toBeLessThan(
+      regions.indexOf(conversationFooter)
+    )
+    expect(regions.indexOf(conversationFooter)).toBeLessThan(
+      regions.indexOf(messageInput)
+    )
   })
 
   it('keeps conversation footer inside the floating composer via renderHeader', () => {
@@ -567,9 +570,11 @@ describe('ChannelView', () => {
     )
 
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- these class selectors verify responsive back-button styling with no semantic query.
       document.querySelectorAll('.messaging-channel-view-back-button-mobile')
     ).toHaveLength(1)
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- these class selectors verify responsive back-button styling with no semantic query.
       document.querySelectorAll('.messaging-channel-view-back-button-desktop')
     ).toHaveLength(1)
   })
@@ -584,9 +589,11 @@ describe('ChannelView', () => {
     )
 
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- these class selectors verify responsive back-button styling with no semantic query.
       document.querySelectorAll('.messaging-channel-view-back-button-mobile')
     ).toHaveLength(0)
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- these class selectors verify responsive back-button styling with no semantic query.
       document.querySelectorAll('.messaging-channel-view-back-button-desktop')
     ).toHaveLength(0)
   })

package/src/components/CustomLinkPreviewList/CustomLinkPreviewList.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { LinkPreview, LinkPreviewStatus } from 'stream-chat'
 import { describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, fireEvent } from '../../test/utils'
+import { userEvent, renderWithProviders, screen } from '../../test/utils'
 import { LOADING_LABEL } from '../LinkAttachment/components/_shared/CardShell'
 
 import { CustomLinkPreviewList } from '.'
@@ -82,7 +82,8 @@ describe('CustomLinkPreviewList', () => {
     expect(list).not.toHaveClass('min-h-0')
   })
 
-  it('is dismiss-only: the staged card never navigates', () => {
+  it('is dismiss-only: the staged card never navigates', async () => {
+    const user = userEvent.setup()
     // The deliberate behaviour change in MES-1349 — see this component's own
     // doc comment for why (MES-1358 §7 Q7, touch hazard). Asserted so the
     // anchor cannot be reinstated by accident.
@@ -97,7 +98,7 @@ describe('CustomLinkPreviewList', () => {
     expect(controls).toHaveLength(1)
     expect(controls[0]).toHaveAttribute('aria-label', 'Dismiss attachment')
 
-    fireEvent.click(controls[0])
+    await user.click(controls[0])
     expect(dismissPreview).toHaveBeenCalledWith('https://example.com/story')
   })
 })

package/src/components/CustomMessage/CustomMessage.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useChannelStateContext, useMessageContext } from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { renderWithProviders, screen, userEvent } from '../../test/utils'
 
 import { OutboundContext } from './OutboundContext'
 import { isTipMessage } from './TipMessage'
@@ -147,7 +147,8 @@ describe('CustomMessage', () => {
     } as never)
   })
 
-  it('uses the latest outbound click handler after rerendering', () => {
+  it('uses the latest outbound click handler after rerendering', async () => {
+    const user = userEvent.setup()
     const firstHandler = vi.fn()
     const secondHandler = vi.fn()
     const { rerender } = renderWithProviders(
@@ -175,11 +176,11 @@ describe('CustomMessage', () => {
         <CustomMessage onOutboundClick={secondHandler} />
       </OutboundContext.Provider>
     )
-    screen
-      .getByRole('button', {
+    await user.click(
+      screen.getByRole('button', {
         name: 'View broadcast July 9th Class attendees',
       })
-      .click()
+    )
 
     expect(firstHandler).not.toHaveBeenCalled()
     expect(secondHandler).toHaveBeenCalledWith({

package/src/components/CustomMessage/MessageTag.test.tsx

@@ -37,6 +37,7 @@ describe('MessageTag', () => {
     expect(indicator).toHaveTextContent('Sent by AI Assistant')
 
     // icon first, then label
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(indicator.children[0].querySelector('svg')).not.toBeNull()
     expect(indicator.children[1]).toHaveTextContent('Sent by AI Assistant')
   })
@@ -56,6 +57,7 @@ describe('MessageTag', () => {
 
     // label first, then icon (mirrored)
     expect(indicator.children[0]).toHaveTextContent('Sent by AI Assistant')
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(indicator.children[1].querySelector('svg')).not.toBeNull()
   })
 
@@ -74,6 +76,7 @@ describe('MessageTag', () => {
     expect(indicator).toHaveTextContent('Sent with AI')
 
     // icon first, then label
+    // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
     expect(indicator.children[0].querySelector('svg')).not.toBeNull()
     expect(indicator.children[1]).toHaveTextContent('Sent with AI')
   })
@@ -88,6 +91,7 @@ describe('MessageTag', () => {
     )
 
     const paidTag = screen.getByText('Delivered with $10.00 message')
+    // eslint-disable-next-line testing-library/no-node-access -- the component wrapper class has no semantic query.
     expect(paidTag.closest('.message-tag--paid')).not.toBeNull()
   })
 
@@ -100,6 +104,7 @@ describe('MessageTag', () => {
       />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the null-rendering DOM contract has no semantic query.
     expect(container.firstChild).toBeNull()
   })
 
@@ -108,6 +113,7 @@ describe('MessageTag', () => {
       <MessageTag message={createMockMessage()} />
     )
 
+    // eslint-disable-next-line testing-library/no-node-access -- the null-rendering DOM contract has no semantic query.
     expect(container.firstChild).toBeNull()
   })
 })

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -2,7 +2,12 @@ import React from 'react'
 import { useChannelStateContext, useMessageContext } from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen, within } from '../../test/utils'
+import {
+  renderWithProviders,
+  screen,
+  userEvent,
+  within,
+} from '../../test/utils'
 
 import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 
@@ -232,9 +237,11 @@ describe('SentMessageDeliveryStatus', () => {
       name: 'View broadcast Broadcast',
     })
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       button.querySelector('.sent-message-outbound-badge')
     ).toBeInTheDocument()
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       button.querySelector('.sent-message-outbound-name')
     ).toHaveTextContent('Broadcast')
     expect(button).not.toHaveTextContent('•')
@@ -275,6 +282,7 @@ describe('SentMessageDeliveryStatus', () => {
     expect(button).not.toHaveTextContent('•')
     expect(name).toHaveClass('sent-message-outbound-name')
     expect(
+      // eslint-disable-next-line testing-library/no-node-access -- media or rendered-markup internals have no user-facing query.
       button.querySelector('.sent-message-outbound-badge')
     ).toHaveAttribute('aria-hidden', 'true')
     expect(screen.getAllByTestId('sent-message-delivery-status')).toHaveLength(
@@ -282,7 +290,8 @@ describe('SentMessageDeliveryStatus', () => {
     )
   })
 
-  it('passes the resolved outbound name to the click callback', () => {
+  it('passes the resolved outbound name to the click callback', async () => {
+    const user = userEvent.setup()
     const onOutboundClick = vi.fn()
     mockedUseMessageContext.mockReturnValue({
       message: {
@@ -305,11 +314,11 @@ describe('SentMessageDeliveryStatus', () => {
       />
     )
 
-    screen
-      .getByRole('button', {
+    await user.click(
+      screen.getByRole('button', {
         name: 'View broadcast July 9th Class absentee',
       })
-      .click()
+    )
 
     expect(onOutboundClick).toHaveBeenCalledWith({
       id: 'automation-1',
@@ -317,7 +326,8 @@ describe('SentMessageDeliveryStatus', () => {
     })
   })
 
-  it('reports a campaign named Broadcast on click', () => {
+  it('reports a campaign named Broadcast on click', async () => {
+    const user = userEvent.setup()
     const onOutboundClick = vi.fn()
     mockedUseMessageContext.mockReturnValue({
       message: {
@@ -337,11 +347,11 @@ describe('SentMessageDeliveryStatus', () => {
       />
     )
 
-    screen
-      .getByRole('button', {
+    await user.click(
+      screen.getByRole('button', {
         name: 'View broadcast Broadcast',
       })
-      .click()
+    )
 
     expect(onOutboundClick).toHaveBeenCalledWith({
       id: 'automation-1',