React Testing Library not rendering with correct props

Question

I have a component:

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>
    </>
  )
}

That uses several sub-components to display an array of icons. It works on my client wonderfully, and even renders in my storybook as intended. However when I try to test it using RTL and Jest:

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

It fails because my text is never passed properly as a prop, this is the result:

<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>

The wrapped_ellipses comes from the rendering of the <TextField /> so that's clearly working. And again, the component <TextWithIcons cellText={'test'} iconList={[]} /> renders correctly in the client so I'm not sure what's going on.

score 0 · Answer 1 · answered Jul 06 '22 at 10:43

0

Can you first try putting a waitFor so any renders (if there are any) are completed and then we can assert other conditions (to see if this works).

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));
});

answered Jul 06 '22 at 10:43

Shyam Mittal

188
2
9

So this produced an interesting error: TypeError: MutationObserver is not a constructor – Demian Licht Jul 06 '22 at 10:55
Fixed that by updating jest, now we're back to the same error – Demian Licht Jul 06 '22 at 11:02
I'd be curious to know what happens if you put a console.log inside the component that isn't receiving the props to see if it's actually receiving the props. I have a similar situation: component isn't receiving props according to RNTL but is obviously receiving them when I print into the console the component's props – Abe Fehr Jul 21 '22 at 14:10

React Testing Library not rendering with correct props

1 Answers1