Answer the question
In order to leave comments, you need to log in
Jest testing vue component?
Good afternoon! While testing the component, I came across an error ErrorWrapper { selector: '#js-remove-card' } The essence of the question is that when the component mounts, I look for find ('selector') the selector I need, but for some reason, it is not visible
here is a piece of code
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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question