Why can't vue-test-utils find a child component?

Viewed 2730

I have next code in template:

<th
    width="0%"
    class="px-3">
    <b-checkbox
        :value="SELECTED_ALL_TEMPLATE"
        @input="TOGGLE_SELECT_ALL_TEMPLATE(!SELECTED_ALL_TEMPLATE)" />
</th>

I want to test, that prop value match expected result of SELECTED_ALL_TEMPLATE getter and called TOGGLE_SELECT_ALL_TEMPLATE after input emitted.

Test code:

it('Checkbox test', function () {
    wrapper = shallowMount(TableHeader);
    const checkbox = wrapper.find(Checkbox);
    expect(checkbox.props().value).toBe(getters.SELECTED_ALL_TEMPLATE()); 
    //Error: [vue-test-utils]: find did not return Component, cannot call props() on empty Wrapper
  });

What am I doing wrong?

Update:

I found a strange behaviour. Also I have in this page TableTh child component:

  <TableTh width="10%" 
       :sorting.sync="ordering.id" 
       :ordering-obj="ordering"> 
       {{ $t.certs.table.codeOfTemplate }} 
  </TableTh> 

and this test passed:

  it('TableTh props', function () { 
    const th = wrapper.find(TableTh); 
    expect(th.props().sorting).toBe(wrapper.vm.ordering.id);
  }); 

But why it doesn't work for Checkbox?

0 Answers
Related