web-dev-qa-db-ja.com

マウントされる前に、Vue-Test-Utilsを使用してコンポーネントのデータ値をどのように設定しますか？

Vest-Test-UtilsでJestを使用しています。私が使用しているコードは次のようになります：

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    data: {
      pageSize: count
    },
    propsData: {
      userId,
      managerId
    }
  })
})

この例では、マウントされたライフサイクルが呼び出される前にpageSize値を設定します。上記のコードの問題は、テストの実行時に次の警告が表示されるようになったことです。

[Vue warn]: Do not use built-in or reserved HTML elements as component id: data

上記のdataプロパティを削除すると、警告が消えます。

データを正しく設定していますか？もしそうなら、私は警告について何をすべきですか？

データを別の方法で設定する必要がありますか？

vue.jsvue-test-utils
8
Daryn

このようにしてみてください：

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
})

参照：setData https://vue-test-utils.vuejs.org/en/api/wrapper/setData.html

13
yukihirop

私にとっての解決策は、データを初期化内の関数として定義することでした：

_beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
      userId,
      managerId
    },
    data: function() {
      return {
        pageSize: count
      }
    }
  })
})
_

私の場合、yukihiropがsetData()を使用して提供したソリューションは機能しませんでした。

私のコンポーネントは、テスト環境内で定義されていないウィンドウオブジェクトからデータにアクセスしていました。このデータはテンプレート内で出力されていました。これにより、マウント直後にsetData()を呼び出す前に例外がスローされました。

8
Nicholas Betsworth