Vue.jsの子コンポーネントのpropsのテスト


Vue.jsのコンポーネントの単体テスト（Vue Test
Utils）で、テストしているコンポーネントから子コンポーネントに、想定通りのpropsが渡っているかテストしたいのですが、どのように書けばいいでしょうか。




`@vue/test-utils`のmount (もしくはshallowMount)
メソッドを用いてコンポーネントをマウントした場合、`wrapper.find(Child).props("prop")`のようにして子コンポーネントに渡されたpropsを取得することができます。

テスト全体は以下のようになるでしょう。

[code]

    import { mount } from "@vue/test-utils";
    import App from "./App.vue";
    import Child from "./components/Child.vue";
    
    const wrapper = mount(App);
    
    expect(wrapper.find(Child).props("fuga")).toEqual("hoge");
    
[/code]

codesandboxでの例を以下に示します。

<https://codesandbox.io/s/get-child-component-props-tieh9>




`@vue/test-utils`のmount (もしくはshallowMount)
メソッドを用いてコンポーネントをマウントした場合、`wrapper.find(Child).props("prop")`のようにして子コンポーネントに渡されたpropsを取得することができます。

テスト全体は以下のようになるでしょう。

[code]

    import { mount } from "@vue/test-utils";
    import App from "./App.vue";
    import Child from "./components/Child.vue";
    
    const wrapper = mount(App);
    
    expect(wrapper.find(Child).props("fuga")).toEqual("hoge");
    
[/code]

codesandboxでの例を以下に示します。

<https://codesandbox.io/s/get-child-component-props-tieh9>

