ViteでVueコンポーネントテスト用のカスタム属性を削除する

はじめに

お久しぶりです、からころです。
突然ですが、みなさん Vite は利用してますか？
Vitest や Jest をはじめ、Vueでコンポーネントのテストをする際に、
しばしばテスト用にカスタム属性を用意することがあります。

テスト属性がバンドルされてプロダクション環境に出てくると、
意図しない挙動を引き起こしたりするかもしれないから避けたい！
そもそもテストタグを追加するだけなのにビルド後のコードに変更が加わるのは気持ち悪い!
といった方に向けた記事になります。

設定について

• nuxt.config.tsの場合

nuxt.config.ts

{
  ...
  // 下記を追加する
  vue: {
    compilerOptions: {
      nodeTransforms: [
        (node) => {
          if (node.type === 1 /* NodeTypes.ELEMENT */) {
            for (let i = 0; i < node.props.length; i++) {
              const p = node.props[i]
              if (p && p.type === 6 /* NodeTypes.ATTRIBUTE */ && p.name === '${任意のタグ}') {
                node.props.splice(i, 1)
                i--
              }
            }
          }
        },
      ],
    },
  },
 ...
}

• vite.config.jsの場合

vite.config.js

{
  ...
  // 以下を追加します
  vueCompilerOptions: {
    nodeTransforms: [
      node => {
        if (node.type === 1 / * NodeTypes.ELEMENT */) {
          for(let i = 0; i < node.props.length; i++){
            const p = node.props[i]
            if (p && p.type === 6 /* NodeTypes.ATTRIBUTE */ && p.name === '${任意のタグ}') {
                node.props.splice(i, 1)
                i--
            }
          }
        }
      }
    ]
  }
  ...
}

少し解説

Vueコンパイラのトランスフォーム処理をHookでき、各種 node.type に割り振られた識別子で
それぞれ何の要素を表しているかが識別できるみたいで、 各識別子の対応は、 1 => HTML ELEMENT で 6 => HTML ATTRIBUTE みたいです。また、このタイミングで任意の属性データを削除すればトランスパイル後に出力されるファイルに含まれなくなるみたいですね。

参考URL: https://github.com/vitejs/vite/issues/636#issuecomment-665545551

おわりに

応用すれば、プロダクション環境時のみや、独自のHTMLタグなども削除できそうですね。
皆さんの快適なVueライフを送れることを祈っています。
何か不明な点などありましたらご質問やご指摘などよろしくお願いします！！