rename data-testid to data-test-id

[zanettin]

Describe the feature you'd like:

Just a renaming of the attribute data-testid to data-test-id or create a custom babel plugin (fork) of https://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id which removes the attributes on prod builds.

Suggested implementation:

• rename the data-testid attribute to data-test-id
• fork https://www.npmjs.com/package/babel-plugin-jsx-remove-data-test-id and adapt it to support data-testid

Describe alternatives you've considered:

Hmm... I'll create a fork of the babel plugin for my self 😆

Teachability, Documentation, Adoption, Migration Strategy:

It's a breaking change for solution 1 or we have to maintain a babel plugin on solution 2

[pbomb]

I migrated our repo from using data-test-id attributes to data-testid to work better with this library. The main reason I'd hesitate to move away from data-testid is that cypress.io has built-in support for it with their Selector Playground.

@kentcdodds, Would it be reasonable for both data-testid and data-test-id attributes to be valid? Or does that add too much complexity to this library?

Also, note that this issue technically is against the dom-testing-library dependency, as that's where this selector logic lives.

[zanettin]

Also, note that this issue technically is against the dom-testing-library dependency, as that's where this selector logic lives.

good point @pbomb ! so my second option would be a good match then by just forking the plugin. but waiting for the final words of the maestro @kentcdodds 😄

[gnapse]

If the only motivation for doing this is to be able to use that babel plugin, then checkout dom-testing-library's FAQ section. It recommends to use this babel plugin for removing the data-testid properties. That plugin is great because it allows you to customize whatever attributes name you want, and not just a specific name.

[zanettin]

thx @gnapse ! for me it was the only motivation! so i‘ll go with your reco. thx.