reactjs - React Testing Library no renderiza con las props correctas

Tengo un componente:

const TextWithIcons = (props: Props) => {
  const {
    cellText,
    isSubline,
    maxWrapLines,
    textFieldWidth,
    iconList,
    hasIconTooltips
  } = props

  const MAX_ICONS_TO_SHOW = 5

  const icons = iconList.slice(0, MAX_ICONS_TO_SHOW).map(icon => (
    <Tooltip
      title={icon}
      duration="10"
      disabled={!hasIconTooltips}
      arrow
      key={icon}
    >
      <SvgIcon svg={icon} key={icon} />
    </Tooltip>
  ))
  return (
    <>
      <TextWithIconsContainers>
        <IconsListContainer>{icons}</IconsListContainer>
        <TextField
          cellText={cellText}
          isSubline={isSubline}
          maxWrapLines={maxWrapLines}
          width={textFieldWidth}
        />
      </TextWithIconsContainers>
    </>
  )
}

Eso utiliza varios subcomponentes para mostrar una serie de íconos. Funciona maravillosamente en mi cliente, e incluso se muestra en mi storybook como se pretende. Sin embargo, cuando intento probarlo usando RTL y Jest:

test('should render, in general', () => {
  render(<TextWithIcons cellText={'test'} iconList={[]} />)
  expect(screen.getByText(/test/i))
})

Falla porque mi texto nunca se pasa correctamente como una prop, este es el resultado:

<body>
      <div>
        <div
          class="TextWithIcons__TextWithIconsContainers-sc-1qor9wr-0 cgvqRu"
          data-cy="customFields_TextWithIcons_TextWithIconsContainers"
        >
          <div
            class="FlexBox__Box-sc-mvbcpv-0 FlexBox__Flex-sc-mvbcpv-1 TextWithIcons__IconsListContainer-sc-1qor9wr-1 CZkHb eVEBgh jMQLdb"
            data-cy="customFields_TextWithIcons_IconsListContainer"
          />
          <div
            data-cy="wrappedEllipsis_WrappedEllipsis_div"
            style="width: 100%; position: relative;"
          >
            <div
              data-cy="__mocks___react-tippy_div"
            />
          </div>
        </div>
      </div>
    </body>

El wrapped_ellipses proviene del renderizado del <TextField />, así que eso claramente funciona. Y de nuevo, el componente <TextWithIcons cellText={'test'} iconList={[]} /> se renderiza correctamente en el cliente, así que no estoy seguro de lo que está pasando.

Respuesta #1

¿Puedes intentar primero poner un waitFor para que se completen todos los renders (si los hay) y luego podamos afirmar otras condiciones (para ver si esto funciona)?

test('should render, in general', async () => {   
    render(<TextWithIcons cellText={'test'} iconList={[]} />);
    await waitFor(() => screen.getByText(/test/i));
 
    // all assertions can follow
    expect(screen.getByText(/test/i));
});