Vue Test Utils 要素の属性値を取得する


Vue Test Utils 要素の属性値を取得する

やりたいこと

例えば、このようなコンポーネントをテストするときに属性値を取得する。

テスト対象.vue
<customComponent>
  v-model="input"
  label="メールアドレス"
  type="Email"
  place-holder="[email protected]"
  :content="formEmail"
></customComponent>

やり方

以下のようでlabel属性の値を取得できる。

__test__/テスト対象.spec.js
import { Mount } from '@vue/test-utils'
import Component from '~/pages/テスト対象.vue' // Nuxtのディレクトリ構造前提

...
wrapper = Mount(Component)

describe('テスト対象.vueのテスト', () => {
  test('属性値の取得', () => {
    expect(wrapper.find('[type=password]').attributes().label).toBe(
      'パスワード'
    )
  })

...