Добрый день! Тестируя компонент наткнулся на ошибку ErrorWrapper { selector: '#js-remove-card' } Суть вопроса состоит в том, что при mount компонента ищу find('selector') нужный мне селектор, но почему, то его не видно
вот кусок кода
it('calls deleteItem when the delete button is clicked and correct data', () => {
const propsData = {
item: items[0],
};
const id = propsData.item.id;
const wrapper = shallowMount (SettingPaymentItem, { propsData, localVue, store } );
console.log(wrapper.find('#js-remove-card'));
//wrapper.find('#js-remove-card').trigger('click', { id })
//expect(store.dispatch).toHaveBeenCalledWith('removeBankCard', id)
})
это сам компонент
<template>
<div class="b-payment__card-item" v-if="card">
<div class="b-payment__card-details">
<div class="b-payment__card-icon">
<icon width="30" height="20" name="i-card-payment" />
</div>
<div class="b-text b-text--size-large b-text--light" v-text="getMaskCard"></div>
</div>
<button id="js-remove-card"
class="b-payment__button b-btn b-btn--xl"
type="button"
@click="removeBankCard(card.id)"
>
<icon width="20" height="20" name="i-remove" />
</button>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import maskCard from '../../../../../../../common/vue/mixins/maskCard';
import Icon from '../../common/Icon';
export default {
name: 'SettingPaymentItem',
components: { Icon },
mixins: [ maskCard ],
methods: {
...mapActions('payment', [
'removeBankCard',
])
},
props: {
card: {
type: Object
}
},
computed: {
getMaskCard() {
return this.maskCard(this.card.account_identifier);
},
}
}
</script>