@linktr.ee/messaging-react 4.4.3 → 4.4.4-rc-1788190776

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

@@ -2,7 +2,12 @@ import React from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 import { describe, expect, it } from 'vitest'
 
-import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+import {
+  fireEvent,
+  renderWithProviders,
+  screen,
+  within,
+} from '../../test/utils'
 
 import StreamAttachmentMessage, {
   linkCaptionDuplicatesAttachmentUrl,
@@ -105,7 +110,7 @@ describe('StreamAttachmentMessage', () => {
   })
 
   it('keeps an emoji-only caption instead of dropping it', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
@@ -124,15 +129,13 @@ describe('StreamAttachmentMessage', () => {
 
     // MessageText linkifies the URL (display text drops the scheme), so the
     // caption is split across a link node and trailing emoji text.
-    const captionBubble = container.querySelector(
-      '.str-chat__message-bubble:not([data-attachment-bubble])'
-    )
+    const captionBubble = screen.getByTestId('message-caption-bubble')
     expect(captionBubble).toHaveTextContent('linktr.ee/someone')
     expect(captionBubble).toHaveTextContent('😎')
   })
 
   it('renders mixed link and media attachments in order', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
@@ -160,7 +163,9 @@ describe('StreamAttachmentMessage', () => {
     expect(link.compareDocumentPosition(imageBubble)).toBe(
       Node.DOCUMENT_POSITION_FOLLOWING
     )
-    expect(container).toHaveTextContent('caption')
+    expect(screen.getByTestId('message-caption-bubble')).toHaveTextContent(
+      'caption'
+    )
   })
 
   it('optimizes Linktree-hosted image attachments for the channel bubble', () => {
@@ -203,7 +208,9 @@ describe('StreamAttachmentMessage', () => {
     // Video posters were the last media URL leaving here at full size —
     // four of them per 2×2 grid.
     expect(
-      screen.getByTestId('video-attachment').querySelector('img')
+      within(screen.getByTestId('video-attachment')).getByRole('img', {
+        hidden: true,
+      })
     ).toHaveAttribute(
       'src',
       'https://ugc.production.linktr.ee/poster.jpg?io=true&size=messaging-attachment-v1_0'
@@ -229,13 +236,14 @@ describe('StreamAttachmentMessage', () => {
     const viewer = screen.getByTestId('image-viewer')
 
     expect(viewer).toHaveAttribute('open')
-    expect(viewer.querySelector('img')?.getAttribute('src')).toBe(
+    expect(within(viewer).getByRole('img', { hidden: true })).toHaveAttribute(
+      'src',
       'https://ugc.production.linktr.ee/photo.jpg'
     )
   })
 
   it('renders the accompanying message text next to a link attachment', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
@@ -252,14 +260,14 @@ describe('StreamAttachmentMessage', () => {
       />
     )
 
-    const bubbles = container.querySelectorAll('.str-chat__message-bubble')
-    expect(bubbles).toHaveLength(2)
-    expect(bubbles[0]).toHaveAttribute('data-attachment-bubble', 'true')
-    expect(bubbles[1]).toHaveTextContent('you have to see this')
+    expect(screen.getByTestId('message-attachment-bubble')).toBeInTheDocument()
+    expect(screen.getByTestId('message-caption-bubble')).toHaveTextContent(
+      'you have to see this'
+    )
   })
 
   it('renders the accompanying message text next to a media attachment', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
@@ -276,11 +284,8 @@ describe('StreamAttachmentMessage', () => {
       />
     )
 
-    expect(container).toHaveTextContent('from the trip')
-    expect(
-      container.querySelector(
-        '.str-chat__message-bubble:not([data-attachment-bubble])'
-      )
-    ).toHaveTextContent('from the trip')
+    expect(screen.getByTestId('message-caption-bubble')).toHaveTextContent(
+      'from the trip'
+    )
   })
 })

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -408,6 +408,7 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
       <div
         className="str-chat__message-bubble"
         data-attachment-bubble="true"
+        data-testid="message-attachment-bubble"
         style={{
           background: 'transparent',
           borderRadius: 0,
@@ -420,6 +421,7 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
       </div>
       {caption ? (
         <div
+          data-testid="message-caption-bubble"
           className={classNames('str-chat__message-bubble', {
             'relative isolate': captionShowsTail,
           })}

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -88,9 +88,9 @@ describe('CustomMessageInput', () => {
   it('renders the interactive message input when channel is not frozen', () => {
     mockChannelData = {}
 
-    const { container } = renderWithProviders(<CustomMessageInput />)
+    renderWithProviders(<CustomMessageInput />)
 
-    const messageInput = container.firstElementChild
+    const messageInput = screen.getByTestId('message-input')
     expect(messageInput).not.toHaveAttribute('aria-disabled')
     expect(messageInput).not.toHaveAttribute('inert')
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
@@ -99,9 +99,9 @@ describe('CustomMessageInput', () => {
   it('renders the frozen message input when channel is frozen', () => {
     mockChannelData = { frozen: true }
 
-    const { container } = renderWithProviders(<CustomMessageInput />)
+    renderWithProviders(<CustomMessageInput />)
 
-    const messageInput = container.querySelector('.message-input')
+    const messageInput = screen.getByTestId('message-input')
     expect(messageInput).toHaveAttribute('aria-disabled', 'true')
     expect(messageInput).toHaveAttribute('inert')
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
@@ -125,7 +125,7 @@ describe('CustomMessageInput', () => {
   it('renders adjacent actions inside the disabled container when frozen', () => {
     mockChannelData = { frozen: true }
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomMessageInput
         renderActions={() => (
           <button data-testid="custom-action" type="button">
@@ -135,17 +135,16 @@ describe('CustomMessageInput', () => {
       />
     )
 
-    const messageInput = container.querySelector('.message-input')
-    const action = screen.getByTestId('custom-action')
+    const messageInput = screen.getByTestId('message-input')
 
     expect(messageInput).toHaveAttribute('aria-disabled', 'true')
-    expect(messageInput?.contains(action)).toBe(true)
+    expect(messageInput).toContainElement(screen.getByTestId('custom-action'))
   })
 
   it('renders adjacent actions in the interactive container when not frozen', () => {
     mockChannelData = {}
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomMessageInput
         renderActions={() => (
           <button data-testid="custom-action" type="button">
@@ -155,8 +154,9 @@ describe('CustomMessageInput', () => {
       />
     )
 
-    const messageInput = container.firstElementChild
-    expect(messageInput).not.toHaveAttribute('aria-disabled')
+    expect(screen.getByTestId('message-input')).not.toHaveAttribute(
+      'aria-disabled'
+    )
     expect(screen.getByTestId('custom-action')).toBeInTheDocument()
   })
 
@@ -233,7 +233,7 @@ describe('CustomMessageInput', () => {
   it('replaces the composer with the locked panel when disabled (channel not frozen)', () => {
     mockChannelData = {}
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomMessageInput
         disabled
         disabledReason="Only Linktree can send messages on this thread"
@@ -243,12 +243,10 @@ describe('CustomMessageInput', () => {
     // The interactive input is gone entirely — no textarea, no send button.
     expect(screen.queryByTestId('stream-message-input')).not.toBeInTheDocument()
     expect(screen.queryByTestId('textarea-composer')).not.toBeInTheDocument()
-    expect(container.querySelector('.message-input')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('message-input')).not.toBeInTheDocument()
 
     // The locked panel with the reason replaces it.
-    expect(
-      container.querySelector('.messaging-composer-locked-panel')
-    ).toBeInTheDocument()
+    expect(screen.getByTestId('composer-locked-panel')).toBeInTheDocument()
     expect(
       screen.getByText(/Only Linktree can send messages on this thread/i)
     ).toBeInTheDocument()
@@ -276,24 +274,19 @@ describe('CustomMessageInput', () => {
   it('renders renderHeader above the floating composer controls', () => {
     mockChannelData = {}
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomMessageInput
         composerInput={() => <div data-testid="custom-composer" />}
         renderHeader={() => <div data-testid="composer-header">header</div>}
       />
     )
 
-    const chrome = container.querySelector(
-      '.messaging-composer-chrome--floating'
-    ) as HTMLElement | null
     const header = screen.getByTestId('composer-header')
-    const messageInput = container.querySelector('.message-input')
+    const messageInput = screen.getByTestId('message-input')
 
-    expect(chrome).not.toBeNull()
-    expect(chrome).toContainElement(header)
-    expect(messageInput).not.toBeNull()
+    expect(screen.getByTestId('composer-chrome')).toContainElement(header)
     expect(
-      header.compareDocumentPosition(messageInput as Node) &
+      header.compareDocumentPosition(messageInput) &
         Node.DOCUMENT_POSITION_FOLLOWING
     ).toBeTruthy()
   })
@@ -301,13 +294,13 @@ describe('CustomMessageInput', () => {
   it('keeps the frozen wrapper around a custom composerInput', () => {
     mockChannelData = { frozen: true }
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomMessageInput
         composerInput={() => <div data-testid="custom-composer" />}
       />
     )
 
-    const messageInput = container.querySelector('.message-input')
+    const messageInput = screen.getByTestId('message-input')
     expect(messageInput).toHaveAttribute('aria-disabled', 'true')
     expect(messageInput).toHaveAttribute('inert')
     expect(screen.getByTestId('custom-composer')).toBeInTheDocument()
@@ -316,12 +309,10 @@ describe('CustomMessageInput', () => {
   it('does not render the locked panel when the composer is not disabled', () => {
     mockChannelData = {}
 
-    const { container } = renderWithProviders(
-      <CustomMessageInput disabledReason="should not show" />
-    )
+    renderWithProviders(<CustomMessageInput disabledReason="should not show" />)
 
     expect(
-      container.querySelector('.messaging-composer-locked-panel')
+      screen.queryByTestId('composer-locked-panel')
     ).not.toBeInTheDocument()
     expect(screen.queryByText(/should not show/i)).not.toBeInTheDocument()
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
@@ -359,13 +350,13 @@ describe('CustomMessageInput', () => {
       vi.unstubAllGlobals()
     })
 
-    const renderCard = () => {
-      const { container } = renderWithProviders(<CustomMessageInput />)
-      return container.querySelector('.central-container') as HTMLElement
+    const mountCard = () => {
+      renderWithProviders(<CustomMessageInput />)
+      return screen.getByTestId('composer-card')
     }
 
     it('caps the card against the surface height and scrolls it as one region', () => {
-      const card = renderCard()
+      const card = mountCard()
 
       expect(card).toHaveClass(
         'max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)]',
@@ -375,16 +366,13 @@ describe('CustomMessageInput', () => {
       // Nothing inside may shrink, or the previews get cropped to make room for
       // the textarea instead of scrolling with it.
       expect(card).not.toHaveClass('min-h-0')
-      expect(
-        card.querySelector('.messaging-composer-previews')
-      ).not.toHaveClass('min-h-0')
-      expect(card.querySelector('.messaging-composer-row')).not.toHaveClass(
-        'shrink-0'
-      )
+      expect(screen.getByTestId('composer-previews')).not.toHaveClass('min-h-0')
+      // eslint-disable-next-line local/no-style-only-assertion -- MES-1037: the row not being shrink-0 is part of the single-scroll contract in this component's doc comment, and jsdom has no layout to observe the squeeze it prevents.
+      expect(screen.getByTestId('composer-row')).not.toHaveClass('shrink-0')
     })
 
     it('lets the textarea grow to fit rather than scrolling its own overflow', () => {
-      const card = renderCard()
+      const card = mountCard()
 
       // TextareaComposer defaults an absent maxRows to 1, so this has to be set.
       expect(screen.getByTestId('textarea-composer')).toHaveAttribute(
@@ -403,7 +391,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('leaves plain-text pastes to the browser but lets file pastes reach Stream', () => {
-      renderCard()
+      mountCard()
 
       // Stream's paste handler is dispatched from React's root, above this
       // card, so a listener further up stands in for it: the event reaching
@@ -428,7 +416,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('detects a pasted file via clipboardData.items even when .files is empty (Safari)', () => {
-      renderCard()
+      mountCard()
 
       // Safari never populates clipboardData.files on paste, even for an
       // image — only .items has it. Checking .files here would silently drop
@@ -448,7 +436,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('scrolls the input back into view when the card shrinks under it', () => {
-      const card = renderCard()
+      const card = mountCard()
       // jsdom has no layout, so stand in for a card whose cap now cuts the
       // input off below the fold.
       Object.defineProperty(card, 'scrollHeight', {
@@ -463,7 +451,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('leaves the scroll position alone when nothing in the composer is focused', () => {
-      const card = renderCard()
+      const card = mountCard()
       Object.defineProperty(card, 'scrollHeight', {
         configurable: true,
         value: 380,
@@ -478,7 +466,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('sticks the send button to the bottom of the scroll, at its resting inset', () => {
-      renderCard()
+      mountCard()
 
       // The offset must match the wrapper's own margin: sticky resolves against
       // the border box, so at bottom-0 the button would lose that inset and sit
@@ -487,7 +475,8 @@ describe('CustomMessageInput', () => {
       // card scrolls far enough for the button to ride up to the top of the
       // row, a staged preview otherwise meets it flush. Asserted together so
       // they cannot drift apart.
-      expect(screen.getByTestId('send-button').parentElement).toHaveClass(
+      // eslint-disable-next-line local/no-style-only-assertion -- the point is that these three offsets match; sticky resolution isn't observable in jsdom.
+      expect(screen.getByTestId('send-button-wrapper')).toHaveClass(
         'sticky',
         'bottom-2',
         'mb-2',
@@ -539,10 +528,8 @@ describe('CustomMessageInput', () => {
     // Simulate the composer growing/shrinking. The observer only re-pins when
     // the composer's offsetHeight increased; jsdom reports 0, so set it
     // explicitly. Mounts with height 0, so any positive value reads as growth.
-    const setComposerHeight = (container: HTMLElement, height: number) => {
-      const composer = container.querySelector(
-        '.messaging-composer-chrome--floating'
-      ) as HTMLElement
+    const setComposerHeight = (height: number) => {
+      const composer = screen.getByTestId('composer-chrome')
       Object.defineProperty(composer, 'offsetHeight', {
         value: height,
         configurable: true,
@@ -572,7 +559,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('scrolls to the bottom when the composer grows and the user was at the bottom', () => {
-      const { container } = renderInLayout()
+      renderInLayout()
       const scroller = screen.getByTestId('scroller')
 
       // At the bottom: scrollHeight - scrollTop - clientHeight = 0.
@@ -581,7 +568,7 @@ describe('CustomMessageInput', () => {
         clientHeight: 300,
         scrollTop: 260,
       })
-      setComposerHeight(container, 200) // grew from 0
+      setComposerHeight(200) // grew from 0
 
       resizeCallback?.([], {} as ResizeObserver)
 
@@ -589,7 +576,7 @@ describe('CustomMessageInput', () => {
     })
 
     it('leaves the scroll position alone when the user has scrolled up', () => {
-      const { container } = renderInLayout()
+      renderInLayout()
       const scroller = screen.getByTestId('scroller')
 
       // Scrolled up reading history: distance from bottom (600px) is well over
@@ -599,7 +586,7 @@ describe('CustomMessageInput', () => {
         clientHeight: 300,
         scrollTop: 100,
       })
-      setComposerHeight(container, 200) // grew, but user is not near the bottom
+      setComposerHeight(200) // grew, but user is not near the bottom
 
       resizeCallback?.([], {} as ResizeObserver)
 

package/src/components/CustomMessageInput/index.tsx

@@ -184,6 +184,7 @@ const CustomMessageInputInner: React.FC = () => {
     // such foreign direct child, without re-adding it to our own wrappers.
     <div
       ref={cardRef}
+      data-testid="composer-card"
       className="central-container flex flex-col min-w-0 w-full max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)] overflow-y-auto overscroll-contain bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)] [&>:not(.messaging-composer-previews):not(.messaging-composer-row)]:p-2"
       data-dd-privacy="mask"
     >
@@ -193,12 +194,18 @@ const CustomMessageInputInner: React.FC = () => {
           textarea's own py-3.5 already separates the last preview from the
           text, and adding one here double-spaces them now that both sit in the
           same scroll. */}
-      <div className="messaging-composer-previews empty:hidden flex flex-col gap-2 px-2 pt-2">
+      <div
+        data-testid="composer-previews"
+        className="messaging-composer-previews empty:hidden flex flex-col gap-2 px-2 pt-2"
+      >
         <QuotedMessagePreview />
         <CustomLinkPreviewList />
         <AttachmentPreviewList />
       </div>
-      <div className="messaging-composer-row flex items-start">
+      <div
+        data-testid="composer-row"
+        className="messaging-composer-row flex items-start"
+      >
         <TextareaComposer
           aria-disabled={disabled || undefined}
           // TextareaComposer wraps the real <textarea> in its own div, so
@@ -271,7 +278,10 @@ const CustomMessageInputInner: React.FC = () => {
             background to sit on: sticky cannot leave its containing block, so
             the button stays inside the row and a preview never passes behind
             it. */}
-        <div className="sticky bottom-2 mt-auto mb-2 mr-2 shrink-0 pt-2">
+        <div
+          data-testid="send-button-wrapper"
+          className="sticky bottom-2 mt-auto mb-2 mr-2 shrink-0 pt-2"
+        >
           <SendButton
             sendMessage={handleSubmit}
             aria-label="Send"
@@ -430,7 +440,10 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
       return (
         <>
           {renderHeader?.()}
-          <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
+          <div
+            data-testid="composer-locked-panel"
+            className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4"
+          >
             {disabledReason ? (
               <p className="max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40">
                 {disabledReason}
@@ -445,12 +458,16 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
     return (
       <div
         ref={composerRef}
+        data-testid="composer-chrome"
         className="messaging-composer-chrome messaging-composer-chrome--floating"
       >
         <ComposerBackdrop />
         <div className="relative z-10 flex flex-col">
           {renderHeader?.()}
-          <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
+          <div
+            data-testid="composer-locked-panel"
+            className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4"
+          >
             {disabledReason ? (
               <p className="max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40">
                 {disabledReason}
@@ -471,6 +488,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
           // @ts-expect-error Only React 19 onwards has `inert` in its types.
           inert={isFrozen ? '' : undefined}
           aria-disabled={isFrozen || undefined}
+          data-testid="message-input"
           className="message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40"
         >
           {renderActions && (
@@ -490,6 +508,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   return (
     <div
       ref={composerRef}
+      data-testid="composer-chrome"
       className="messaging-composer-chrome messaging-composer-chrome--floating"
     >
       <ComposerBackdrop />
@@ -501,6 +520,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
             // @ts-expect-error Only React 19 onwards has `inert` in its types.
             inert={isFrozen ? '' : undefined}
             aria-disabled={isFrozen || undefined}
+            data-testid="message-input"
             className="message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40"
           >
             {renderActions && (

package/src/components/CustomSystemMessage/CustomSystemMessage.test.tsx

@@ -19,13 +19,17 @@ const createProps = (
     },
   }) as EventComponentProps
 
+// Clock digits, not a locale-formatted string: the contract is that a
+// timestamp shows, not how it is formatted.
+const TIMESTAMP = /\d{1,2}:\d{2}/
+
 describe('CustomSystemMessage', () => {
   it.each([
     'SYSTEM_ESCALATION',
     'SYSTEM_DM_AGENT_PAUSED',
     'SYSTEM_DM_AGENT_RESUMED',
   ] as const)('hides the timestamp for %s', (customType) => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomSystemMessage
         {...createProps({
           metadata: { custom_type: customType },
@@ -33,11 +37,11 @@ describe('CustomSystemMessage', () => {
       />
     )
 
-    expect(container.querySelector('time')).not.toBeInTheDocument()
+    expect(screen.queryByText(TIMESTAMP)).not.toBeInTheDocument()
   })
 
   it('shows the timestamp for age safety system messages', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomSystemMessage
         {...createProps({
           metadata: { custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED' },
@@ -45,22 +49,20 @@ describe('CustomSystemMessage', () => {
       />
     )
 
-    expect(container.querySelector('time')).toBeInTheDocument()
+    expect(screen.getByText(TIMESTAMP)).toBeInTheDocument()
   })
 
   it.each([
     { metadata: {}, text: 'Unknown system message' },
     { text: 'Absent system type' },
   ])('hides the timestamp for unknown or absent system types', (overrides) => {
-    const { container } = renderWithProviders(
-      <CustomSystemMessage {...createProps(overrides)} />
-    )
+    renderWithProviders(<CustomSystemMessage {...createProps(overrides)} />)
 
-    expect(container.querySelector('time')).not.toBeInTheDocument()
+    expect(screen.queryByText(TIMESTAMP)).not.toBeInTheDocument()
   })
 
   it('hides the timestamp for legacy dm-agent messages without a custom_type', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomSystemMessage
         {...createProps({
           dm_agent_system_type: 'SYSTEM_DM_AGENT_PAUSED',
@@ -68,7 +70,7 @@ describe('CustomSystemMessage', () => {
       />
     )
 
-    expect(container.querySelector('time')).not.toBeInTheDocument()
+    expect(screen.queryByText(TIMESTAMP)).not.toBeInTheDocument()
   })
 
   it('detects DM Agent system subtype from metadata.custom_type', () => {
@@ -112,7 +114,7 @@ describe('CustomSystemMessage', () => {
   })
 
   it('renders the age safety blocked subtype with fallback copy and warning treatment', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomSystemMessage
         {...createProps({
           text: '   ',
@@ -146,18 +148,10 @@ describe('CustomSystemMessage', () => {
     expect(
       screen.getByTestId('age-safety-system-message-icon')
     ).toBeInTheDocument()
-    expect(
-      container.querySelector('.mes-age-safety-system-message__icon')
-    ).toBeInTheDocument()
-    expect(
-      container.querySelector(
-        '[data-testid="age-safety-system-message-icon"] path[opacity="0.2"]'
-      )
-    ).toBeInTheDocument()
   })
 
   it('falls back to legacy generic rendering when subtype is absent or unknown', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CustomSystemMessage
         {...createProps({
           text: 'Legacy system message',
@@ -170,9 +164,9 @@ describe('CustomSystemMessage', () => {
     expect(
       screen.queryByTestId('dm-agent-system-message')
     ).not.toBeInTheDocument()
-    expect(screen.getByText('Legacy system message')).toBeInTheDocument()
     expect(
-      container.querySelector('.str-chat__message--system__line')
-    ).toBeInTheDocument()
+      screen.queryByTestId('age-safety-system-message')
+    ).not.toBeInTheDocument()
+    expect(screen.getByText('Legacy system message')).toBeInTheDocument()
   })
 })

package/src/components/FaqList/FaqList.test.tsx

@@ -129,11 +129,10 @@ describe('FaqList', () => {
   })
 
   it('renders the header only when headerText is provided', () => {
-    const { container, rerender } = renderWithProviders(
+    const { rerender } = renderWithProviders(
       <FaqList faqs={faqs} onFaqClick={vi.fn()} />
     )
-    expect(screen.queryByText('Frequently asked questions')).toBeNull()
-    expect(container.querySelector('p')).toBeNull()
+    expect(screen.queryByTestId('faq-list-header')).not.toBeInTheDocument()
 
     rerender(
       <FaqList
@@ -142,7 +141,9 @@ describe('FaqList', () => {
         headerText="Frequently asked questions"
       />
     )
-    expect(screen.getByText('Frequently asked questions')).toBeInTheDocument()
+    expect(screen.getByTestId('faq-list-header')).toHaveTextContent(
+      'Frequently asked questions'
+    )
   })
 
   it('passes className to the list root', () => {

package/src/components/FaqList/index.tsx

@@ -60,7 +60,12 @@ export const FaqList: React.FC<FaqListProps> = ({
           style={{ backgroundColor: '#F1F0EE' }}
         >
           {headerText && (
-            <p className="text-md text-charcoal mb-4">{headerText}</p>
+            <p
+              data-testid="faq-list-header"
+              className="text-md text-charcoal mb-4"
+            >
+              {headerText}
+            </p>
           )}
           {enabledFaqs.map((faq) => (
             <FaqListItem