R
R
Roman Romanovich2020-09-30 14:06:44
Unit testing
Roman Romanovich, 2020-09-30 14:06:44

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)
    })


this is the component itself
<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 question

Ask a Question

731 491 924 answers to any question