avoriaz
avoriaz copied to clipboard
Can't find nested component with neither '.find' nor '.first' wrapper methods
My BottomConnectorControl.vue
has template:
<template>
<div
class="col-lg-6 col-md-6 col-sm-12 col-xs-12"
v-if="showControl"
>
<panel
title="Boot on wallplug"
>
<p>
Automatically turn unit on when the power is supplied via the bottom connector.
</p>
<p>
<toggle
@input="bootOnWallplugSettingToggle"
v-model="bootOnWallplugEnabled"
:disabled="bootOnWallplugSettingPending"
:hideLabels="true"
/>
</p>
</panel>
</div>
</template>
In tests I try to find Toggle
to trigger click
on it, but it finishes with nothing.
import BottomConnectorControl from '@/components/Settings/BottomConnectorControl.vue';
import type { Wrapper } from '../types.flow';
import { expect } from 'chai';
import { mount } from 'avoriaz';
import store from '@/store';
import Panel from '@/components/common/Panel.vue';
import Toggle from '@/components/common/Toggle.vue';
describe('BottomConnectorControl.vue', (): void => {
const createWrapper: Function = (): Wrapper => {
return mount(BottomConnectorControl, {
store
});
};
describe('Interactions', (): void => {
it('click on pending toggle', (): void => {
store.commit('changeDevice', 'ReachRS+');
const control: Wrapper = createWrapper();
const toggle1: Object = control.find(Toggle);
const toggle2: Object = control.find('.toggle');
const panel: Object = control.find(Panel);
console.log('toggle1',toggle1)
console.log('toggle2', toggle2)
console.log('panel', panel)
});
});
})
After running the tests I see it in my console. Despite of the argument I pass to the find
method it returns []
an empty Array. But if I try to find Panel
component, it will find it:
@eddyerburgh sorry to trouble you, can you help? :)
Issue resolved after migration to the @vue/test-utils
Yes, I recommend migrating to @vue/test-utils 👍