追記(2019/02/12)
テスト用にdata-test属性を使ってる
VueコンポーネントのテストをJest + vue-test-utilsで書いてる。
dataとかpropsの値によって状態が変化する要素のテストをするとき、要素の特定のためにクラス名使うといろいろ大変だからテスト用にdata-test属性を使ってる。
data-test属性を消したい
テストするときには便利だけど、あくまでテスト用で、リリースするときには消しておきたい。
特定の属性を消すReact用のbabelプラグインがあったけど、Vue用のは見つけられなかった。代わりにフォーラムで見つけたのがこれ。
vue-loaderのオプションで属性消せるよとのこと。
次のコードはフォーラムのコードからNODE_ENV の値見てるとことlodash依存を排除したやつ。
{ compilerModules: [{ preTransformNode(astEl) { const { attrsMap, attrsList } = astEl if (attrsMap['data-test']) { delete attrsMap['data-test'] const index = attrsList.findIndex(x => x.name == 'data-test' ) attrsList.splice(index, 1) } return astEl } }] }
これでdata-test属性が消えて万歳🎉
nuxt.jsで同じことしたい
nuxt.config.jsのbuild.extendでvue-loaderのオプションを指定する。
module.exports = { build: { extend (config, ctx) { if (!ctx.isDev) { const vueLoader = config.module.rules.find(rule => rule.loader === 'vue-loader') vueLoader.options.compilerModules = [{ preTransformNode(astEl) { const { attrsMap, attrsList } = astEl if (attrsMap['data-test']) { delete attrsMap['data-test'] const index = attrsList.findIndex(x => x.name == 'data-test' ) attrsList.splice(index, 1) } return astEl } }] } }, } }
