What problem does this feature solve?

Currently there are several ways of targeting elements demonstrated in the docs (good). But people are confused as what the "best practice" would be and how to remove test tokens from their code in snapshots and production builds.

What does the proposed API look like?

• Template/HTML:
  • Pick an official data- attribute for use. Something like <h1 data-test="pageTitle">.
• Targeting:
  • Instead of:

  // prefixing ref with test to denote it is only used for tests
  wrapper.findAll({ ref: 'testPageTitle' })
  // This would still work, but we can do better
  wrapper.findAll('[data-test="pageTitle"]')

  • It could be:

  // Will target all elements with a data-test="pageTitle"
  wrapper.findAll({ test: 'pageTitle' })

• Snapshots:
  • jest-serializer-vue now automatically removes all data-test="whatever" values from snapshots.
  • My fork of jest-serializer-vue has this enabled by default, with vue config options to disable it. (among many other improvements)
    • https://www.npmjs.com/package/jest-serializer-vue-tjw
• Production:
  • With an officially recommended "best practice", when a Vue-CLI project opts in to testing, the Webpack config could automatically remove all data-test's from the production build.
    • https://forum.vuejs.org/t/how-to-remove-attributes-from-tags-inside-vue-components/24138