jestjs - vue-test-utils と JEST で $root をモックする

Question

私のコンポーネントには、次の計算コードがあります。

textButton() {
    const key = this.$root.feature.name === //...
    // ...
},

現在、テストで必死に「ルート」をモックしようとしていますが、方法がわかりません。任意のヒント？

Answer 1

Vue テスト ユーティリティは、コンポーネントをマウント (またはシャロー マウント) するときにモックを注入する機能を提供します。

const $root = 'some test value or jasmine spy'

let wrapper = shallow(ComponentToTest, {
  mocks: { $root }
})

それは簡単にテストできるはずです。それが役立つことを願っています

Answer 2

https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430からのソリューション:

vm に $root を直接設定できます。

wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()

または、parentComponent マウント オプションを使用して親コンポーネントを渡すこともできます。VTU では、括弧は $root になります。

const Parent = {
  data() {
    return {
      loading: "asdas"
    }
  }
}
const wrapper = shallowMount(TestComponent, {
  parentComponent: Parent
})

Answer 3

でこれを行うには 2 つの方法がありますvue-test-utils。

1 つの方法は、前述のように、mocks取り付けオプションを使用することです。

const wrapper = shallowMount(Foo, {
  mocks: {
    $root: { 
      feature: { 
        name: "Some Val" 
      }
    }
  }
})

しかし、あなたのケースでは、計算された mouting オプションを使用したいと思うでしょう。これは、 の深いオブジェクトよりも少しクリーンですmocks。

const wrapper = shallowMount(Foo, {
  computed: {
    textButton: () => "Some Value"
  }
})

うまくいけば、これが役に立ちます！

興味があれば、Vue コンポーネントをテストする方法に関する簡単なガイドのコレクションをここにまとめています。これは開発中ですが、Vue コンポーネントのテストに関連するその他の事項についてサポートが必要な場合は、お気軽に問題を作成してください。