Vue Test Utils ケバブケースの属性の値を参照する
やりたいこと
例えば、このようなコンポーネントをテストするときにケバブケースで記載された属性値を取得する。
テスト対象.vue
<customComponent>
v-model="input"
label="メールアドレス"
type="Email"
place-holder="email@example.com"
:content="formEmail"
></customComponent>
やり方
以下のようにケバブケースで表現されたplace-holder属性の値を取得できる。
単純に属性から'-'を消せばアクセスできる。
__test__/テスト対象.spec.js
import { Mount } from '@vue/test-utils'
import Component from '~/pages/テスト対象.vue' // Nuxtのディレクトリ構造前提
...
wrapper = Mount(Component)
describe('テスト対象.vueのテスト', () => {
test('ケバブケースで表現された属性値の取得', () => {
expect(formEmail.attributes().placeholder).toBe('your.email@example.com')
})
...