search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.49k stars 4.12k forks source link

Unable to add data-testid to custom components #5753

Open Szorcu opened 11 months ago

Szorcu commented 11 months ago

Hi, I am not able to add data-testid for custom components. I don't really know whether it is a bug or feature suggestion, but I feel like this should work out of the box. It feels really weird that ts is not showing any error, but provided data-testid is just not there after all.

Link to sandbox: https://codesandbox.io/s/react-select-v5-data-test-id-for-custom-components-4m5dnn?file=/SingleSelect.tsx

IbraheemHaseeb7 commented 10 months ago

can you explain this bug, what is not achieved here?

Szorcu commented 10 months ago

Hey, sorry for the lack of detail. I have made the sandbox available, but not what the expected behaviour is, my bad.

Problem description My point is that, as you can see in the code sample I provided, even if I managed to add the data-testid property to the custom components component, it is not available. And in my opinion, this is strange because TS does not give any error message. This property simply disappears.

My workaround In order to make a work around for this I had to not use components component and create specific custom component from scratch to add this data-testid that is required for me when I want to write E2E tests.

Summary As I said at the begging, I am not sure if it's a bug or feature suggestion. The problem is that data-testid is just an example, but I think that any prop that is by default accepted by e.g. div should be accepted and applied to component. Or at least consider better TS support. Cause I had really hard time debugging why data-testid prop is not available after render, when TS did not give me any error.