How to use `getByTestId` on web?

[conor909]

I believe there was recently a merge to make sure getByTestId only returns native elements.
#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()

[conor909]

Realize this was a lack of understanding

[mitramejia]

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

[conor909]

@mitramejia I cant remember the exact issue, but I've been having trouble with testing-library in general. It's never clear how to write the test. Sometimes I need to await the query, or sometimes I need to await the expect(). I also find it very difficult to know what query to use, get, find etc. Generally it's usually async problems, but also even using the basic api I get warnings in the console about state updates not being wrapped in act(), or Im trying to update state even after a test has ended, and I have no idea how to fix those warnings, the components are not even complex.

It could be an issue because Im trying to write 1 test for web and mobile. Although I thought the apis were the same, it probably doesn't work in practice

[jesshmusic]

I am also getting this exact issue, is there a specific way to use getByTestId for the web Platform as well?

[AlanSl]

It looks like the original "lack of understanding" was misunderstanding the scope of the old linked PR "to make sure getByTestId only returns native elements. #324" - original post appears to be reading it as web vs native when it was actually nothing to do with web, and by "native elements" it meant React Native's own primitive components (View, Text, TextInput etc) that directly correspond to an underlying iOS or Android element, as opposed to custom intermediary components that might have a prop called testID but only exist in JS / React (e.g. in const CustomText = ({ testID, children }) => <Text testID={testID}>{children}</Text> only matching the Text element, ignoring the CustomText intermediary).

As for the question of how to use *ByTestId in cross-platform tests that include React Native Web, the closest I can find to an answer is the long discussion on this closed PR.

@conor909 it'd be great if you could re-open this because the original question seems valid - the linked discussion doesn't give a clear answer and predates some of the effort to unify the APIs of this library and its web react counterpart.

[mdjastrzebski]

@AlanSl due to various reasons (basically: available people & our time, solving one problem well instead of spreading thin), we focus on React Test Renderer-based tests. This assumption is reflected in how all our queries and event handling works, and what our own tests check. In a sense RNTL covers the general React Native platform (we do not run iOS or Android native code), so we also support RN part of RN web apps.

Rendering using RN Web renderer is quite different, and works in a completely different environment with browser APIs exposed by jsdom. This happens to be the same setup that React Testing Library is created for, so we recommend using the OG testing library as far better alternative, providing much more reliable testing at the cost of having a separate general RN Web test suit. For all of the above reasons using RNTL to test RN Web rendering is not supported, sorry.

[conor909]

At the moment I believe the only solid approach to testing web and mobile is to write 2 tests, I’m sure it’s only a matter of time before someone can marry rntl and rtl successfully, or come up with a cool new library. If anyone has any other options please share

[mdjastrzebski]

Please do not reopen this issue, as it is not actionable. If this is for reference then users can also browse closed issues. Otherwise it only clutters the overview of the features and issues we actually plan to work with.

BTW if someone is looking for an experimental side project, then building a small wrapper over RTL + RNTL to allow testing may be a way to go.