feat: remove cypress' data-test attributes in production

package.json

@@ -176,6 +176,7 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
+    "babel-plugin-react-remove-properties": "^0.3.0",
     "cypress": "9.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",

react-app-rewired.config.js

@@ -274,6 +274,20 @@ module.exports = {
         : {}
     )
 
+    // Remove data-test="" attributes from production builds
+    //
+    //   data-test attributes are used as unique identifiers in  cypress integration and e2e tests.
+    //   They aren't needed in production and
+    //     a) only bump up the bundle size, as well as
+    //     b) make it stupidly easy for potential bot authors
+    //        to automate site interactions.
+    //        (After all, that automation is what cypress tests do)
+    if (isProduction) {
+      const oneOfLoaders = config.module.rules.find(rule => Array.isArray(rule.oneOf))?.oneOf
+      const babelLoader = oneOfLoaders.find(rule => rule.loader?.includes('babel-loader'))
+      babelLoader.options.plugins.push(['react-remove-properties', { properties: ['data-test'] }])
+    }
+
     return config
   },
   devServer: configFunction => {

yarn.lock

@@ -7094,6 +7094,11 @@ babel-plugin-react-docgen@^4.1.0, babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
+babel-plugin-react-remove-properties@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
+  integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"