1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2020-05-09

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

やりたいこと

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

テスト対象.vue
<customComponent>
  v-model="input"
  label="メールアドレス"
  type="Email"
  place-holder="email@example.com"
  :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(
      'パスワード'
    )
  })

...
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?