React-testing-library: The `data-testid` won't work if `div` isn't wrapped

[hyochan]

Hi there. Thanks for awesome library. I've been a real lover of react-testing-library these days.

I have an issue using this when I try to grab the data-testid inside my custom component (example below).

<Button
  data-testid='my-test'
  onClick={() => changeTheme()}
/>

When I try to grab above component like below

const btn = renderResult.getByTestId('my-test');

react-testing-library won't grab this.

The workaround of solving above problem is by wrapping my component with div tag.
Workaround:

<div data-testid='my-test'>
  <Button
    onClick={() => changeTheme()}
  />
</div>

I've not experienced above in react-native-testing-library which was inspired by react-testing-library. I hope this could work without the workaround.

[bcarroll22]

Hey @hyochan, generally speaking this is the opposite of what you should try to do with this library (and native-testing-library as well).

You shouldn't be querying for your custom components (they're implementation details) and usually when you need to use a test id, I find it tends to be a symptom of some undesirable test behavior.

I think the better place for this type of question in the future would be the spectrum chat, could you please follow up on this question there to get some suggestions on what you should do?

[kentcdodds]

My guess is the Button component doesn't forward the props it receives to the underlying button that is rendered which is why you're having this problem

[fandingdevs]

So sad that it's been closed. @kentcdodds Maybe you are right but it comes worse when you use styled-component. Below is what I am doing.

const Container = styled.div`
  flex: 1;
  background-color: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;

interface IProps {
  history?: any;
}

function Page(props: IProps) {
  return (
    <Container>
      <div
        data-testid='myText'
      >dooboolab</div>
    </Container>
  );
}

export default Page;

I can't use data-testid directly inside Container.

[bcarroll22]

I believe that’s still a question for spectrum, but I don’t believe you need to select the container. The container is an implementation detail. You should be selecting the DOM nodes your users interact with, not your components or styled wrappers.

[hyochan]

@bcarroll22 Well @testing-library/react-native works well with the styled-component. Why should they have the different behavior?

[bcarroll22]

@testing-library/react-native won't allow you to query custom components either assuming you're using the latest version and the Jest preset. You can only query for the built-in native components.

I've never used styled-components with React Native, but if it works it's likely because styled components renders a View or Text with the React Native styles, or it passes the test id down to the child native component that it renders. The thing to keep in mind is that many React Native components, especially built-in and library ones, pass through {...props}.