vue-loader + webpackでテスト用のデータ属性data-testidをコンパイル時に取り除く

vue

Vueでテストを書く時によく使われるのはvue-test-utilsですよね。

コンポーネントのテストでDOMの変更に柔軟に対応するために「data-test」や「data-testid」などテストでのアクセス用に、データ属性をつける方法がよく用いられます。

テストでしか使用しないデータ属性はプロダクションビルドには必要なく取り除くことが多いですが、 大抵はvue-loaderを使ったwebpackのビルド時に特定のデータ属性を取り除きます。

compilersOptionsを設定して取り除く方法を紹介したいと思います。
この記事執筆時のvue-loaderの最新場バージョンは15.9.1です。

data-testidをwebpackでコンパイル時に取り除く

webpackでビルド時に特定のデータ属性を取り除くコードでcompilersModulesの例がよく紹介されています。
ですが今はcompilerModulesではなく先に書いたようにcompilerOptionsでの対応になります。

今回は下記のフォーラムを参考にしました。

https://forum.vuejs.org/t/how-to-remove-attributes-from-tags-inside-vue-components/24138/8

フォーラムでは15.2.4の時点からcompilersOptionsを使うコードが紹介されています。

今後はvue-loaderやwebpackの仕様が変わらない限りは下記のコードでwebpackのビルド時に特定のデータ属性を取り除くことができます。

{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
// some loader options
},
compilerOptions: {
modules: [
{
preTransformNode(astEl) {
const key = 'data-testid'
const { attrsMap, attrsList } = astEl
if (attrsMap[key]) {
delete attrsMap[key]
const index = attrsList.findIndex((x) => x.name == key)
attrsList.splice(index, 1)
}
return astEl;
}
}
]
}
}
}

テスト用のデータ属性を使う理由

そもそも 例えばvue-test-utilsの公式を始めよく見かけるのはタグやHTMLクラス名を使う方法があります。

// タグ
wrapper.find(`button`).trigger('click')
// クラス
wrapper.fing(`.btn`).trigger('click')

実装でタグやクラス名、DOMの構造に変更が生じると必然的にテストがエラーになります。
そのたびにテストを修正する必要がでてきますが、メンテナンスのコストなどの観点からこれが理由でコンポーネントのテストが避けらやすい要因の一つです。

その問題を解決するために考えられたのが「data-testid」や「data-test」というテストで用いるための属性をHTMLにつけることです。

<template>
<div>
<button class="button" data-testid="submit">submit</button>
</div>
</template>
wrapper.find(`[data-testid="submit"]`).trigger('click')

このようにすることでDOMに変更が発生してもデータ属性の値を変更しない限りDOMへのアクセスでテスト結果に変化が生じることがなくなります。

まとめ

間違ったデータ属性をつけてしまった場合にビルド時に取り除くことができないという不安もあります。

もちろんその場合テスト時に意図した結果にならないので気づくことができますが、いまいちすっきりしない部分であったりもします。

そのような不安はありつつ現状ではやはりDOMは変更されやすいという性質上テスト時に専用のデータ属性をつけてビルド時に取り除くという方法がコンポーネントのテストにおいて一番良い方法のように思います。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.