vue.js - 存根电话输入 jest vue JS

Question

我正在尝试对我在我的一个 Vue 组件中使用的 tel 输入插件进行存根。

这是我尝试过的，我想我几乎得到了它，但我错过了一个小细节。

这是我的规格文件：

import { mount, createLocalVue } from '@vue/test-utils';
import ModalNewCustomer from "../../../resources/js/subviews/customers/components/ModalNewCustomer";

// Stubs
const telInput = {
    template: `<input type="tel">`
}

import moment from 'moment';

describe('Modal New Customer',() => {
    let wrapper,mockCheckNameDuplicate;

    let districts = [
        {"id":1,"name":"Aberdeen"},
        {"id":2,"name":"Admiralty"},
        {"id":3,"name":"Ap Lei Chau"},
        {"id":4,"name":"Beacon Hill"},
        {"id":5,"name":"Braemar Hill"},
        {"id":6,"name":"Causeway Bay"},
        {"id":8,"name":"Central"}
    ];

    let newCustomerData ={
        firstName: 'Loulou',
        lastName: 'Le Loup',
        emailAddress: '[e-mail]',
        sex: 'M',
        primaryPhoneNumber: '[phone]',
        secondaryPhoneNumber: '[phone]',
        birthday: "2020-11-30",
        wayOfContact: 'email',
        electroOrNot: 1,
        asiaMilesMembership: '00001111'
    };

    beforeEach(() => {
        mockCheckNameDuplicate = jest.spyOn(ModalNewCustomer.methods, 'checkNameDuplicate');

        wrapper = mount(ModalNewCustomer,{
            localVue,
            propsData:{
                districts: districts
            },
            data(){
                return{
                    COMPANY_NAME: 'HK'
                }
            },
            router,
            stubs:{
                "vue-tel-input": telInput
            }
        });

        flushPromises();
        jest.resetModules();
        jest.clearAllMocks();
    });

    afterEach(() => {
        flushPromises();
        jest.resetModules();
        jest.clearAllMocks();
    })

    it('can input new customer data and submit it',async() => {
        const {vm} = wrapper;

        let primaryPhoneNumberInput = wrapper.find('#primaryPhoneNumber');
        await primaryPhoneNumberInput.setValue(newCustomerData.primaryPhoneNumber)

        expect(primaryPhoneNumberInput.element.value).toBe(newCustomerData.primaryPhoneNumber);
        console.log(primaryPhoneNumberInput.html())
        console.log(vm.newCustomer.primaryPhoneNumber)


    });
});

在我的 vue 组件中，vue tel 输入如下所示：

             <vue-tel-input
                 id="primaryPhoneNumber"
                 :default-country="COMPANY_NAME"
                 validCharactersOnly
                 v-model="newCustomer.primaryPhoneNumber"
                 :inputOptions="inputOptions">
             </vue-tel-input>

问题是当我设置我的存根组件的值时，我正在测试的 Vue 组件的数据没有被更新，由于 v-model 应该重新渲染它。

谢谢你的帮助。

标签： vue.jsjestjs