Search code examples
reactjscreate-react-app

How to remove data-testid from production build


I want to remove data-testid from the production build, so these attributes can't be found in the prod build Particularly in this case, I need something that works with .tsx files I know how to remove it using a function in components, but I think there should be a smarter way to do this. react cra react-app-rewired


Solution

  • I guess my question would be why do you think you need to remove them? They're just string attributes. Unless you're working on an app with an incredible number of elements with ID's and you want to decrease the build size by a very tiny amount, it's not particularly useful.

    Unless you think these ID's are somehow providing potentially dangerous information to bad actors, I wouldn't be concerned about them. And if you think they are, the first thing I would do is reform their naming so that's not the case.

    But if you are determined to remove them, there appears to be a Babel plugin that will strip them out when your code is transpiled: https://github.com/coderas/babel-plugin-jsx-remove-data-test-id

    But in my personal opinion it's probably not necessary.

    Cheers!