How to use `getByTestId` on web?

I believe there was recently a merge to make sure getByTestId only returns native elements. https://github.com/callstack/react-native-testing-library/pull/324

Does this mean we can’t use getByTestId on web?

In my test file in web says no element matches the testID, where as in iOS it’ finds the element and my test passes. If I switch to use a queryByText query, it works fine on both platforms. But I’m targeting a plain react native <View> to check the styling on it is expected, so I need to target by testID.

  // Fails to find ID
  if (Platform.OS === 'web') {
    test('StickyHeader should have sticky position prop on web', () => {
      const { getByTestId } = renderRoute(<AuthenticatedApp logOut={jest.fn} user={user} />)
      const stickyHeader = getByTestId('sticky-header')
      expect(stickyHeader).toHaveStyle({ position: 'sticky' })
    })
  } 

  // Passes
  if (Platform.OS === 'ios') {
    test('StickyHeader should have relative position prop on ios ', () => {
      const { getByTestId } = renderRoute(<AuthenticatedApp logOut={jest.fn} user={user} />)
      const stickyHeader = getByTestId('sticky-header')
      expect(stickyHeader).toHaveStyle({ position: 'relative' })
    })
  }

debug

// prints out the screen structure and I can see an object with `testID='sticky-header'`
// it also includes style object with `position: 'sticky'`, so I can see it does exist
const { debug } = renderRoute(<AuthenticatedApp logOut={jest.fn} user={user} />)
debug()

[mitramejia]

@conor909 can you expand a bit? what was the lack of understanding you realized? I am facing the same issue

[conor909]

Realize this was a lack of understanding