prop-types-exact prevents user from using data-testid prop for locating components during testing

[vjpr]

Bug report

Describe the bug

When using the common data-testid practice for components (https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269), prop-types-exact prints errors that are not able to be disabled.

Was added here: #2516

suprraz/babel-plugin-react-element-info#2

Solutions

a. Remove prop-types-exact
b. Add another prop to Link that allows disabling it (escape hatch).

Workaround

Wrap Link component, and don't add data-testid to next/link, only to the wrapper.

[timneutkens]

Adding data-testid to <Link> won't add anything to the resulting HTML document, adding it to <a> or the element under <Link> will, so the exact proptypes check is correct here, and this is not a bug.

[vjpr]

Its more of a unintentional restriction of testability, a feature request I guess.

If you have a Link that you want to test with Selenium/Cypress, you cannot add a data-testid prop to make it easy to find without causing this ugly error.

The use of this prop-types-exact lib makes it impossible.

[vjpr]

Ah wait, I see what you mean. I was using a babel-plugin to generate the data tags. Placing one on the Link tag would never make it to the dom anyway as you said.

So the workaround I mentioned above is really the only viable solution, and is user-land.