Входные данные модульного тестирования в компоненте vue js, использующем начальную загрузку vue b-form-input

Question

У меня есть компонент, который использует загрузочное значение b-form-input, которое я пытаюсь пройти в модульном тестировании с использованием Jest:

<template>
    <div>
        <div class="cartulary" @click="click">
            <div :class="'classification ' + active">
                <fuse-icon @click="updateProduct($event, 'delete')" iconClass="dismiss" customCss="float-right"></fuse-icon>
                <div class="row align-items-center">
                    <div class="col-lg-3">
                        <div class="product-name">
                            {{ productData.name }}
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="row">
                            <!-- Contract ID -->
                            <div class="col-lg-4">
                                <div class="row">
                                    <div class="col-lg-5" id="contract-id-label">
                                        <span class="detail-label">
                                           Contract ID *
                                        </span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12" id="contract-id-input">
                                        <b-form-input
                                            placeholder="7-digit code"
                                            :value="productData.contractId"
                                            @input="updateProduct($event, 'contractId')"
                                            aria-describedby="contractIdFeedback"
                                            autocomplete="off"
                                            maxlength="7"
                                            :state="this.productValidationStates.contractId"
                                            @keydown.native="isNumericAllowed($event)"
                                        >
                                        </b-form-input>
                                        <b-form-invalid-feedback id="contractIdFeedback">
                                           7 digits required
                                        </b-form-invalid-feedback>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import validationHelpers from '../../../helpers/validationHelpers'
    export default {
        name: 'EnercareLineItem',
        props: [
            'options',
            'active'
        ],
        data() {
            return {
                datePickerOptions: {
                    type: 'datetime',
                    format: 'MM/dd/yyyy hh:mm A',
                    placeholder: 'Select date and time'
                },
                productData : this.options,
                productValidationStates: {
                    contractId: '',
                    caseId: ''
                },
                isValid: false
            }
        },
        methods: {
            click() {
                this.$emit('click')
            },
            /**
             * Only allow the user to enter numbers, otherwise prevent the
             * input from registering
             */
            isNumericAllowed(event) {
                if (!validationHelpers.allowNumeric(event)) {
                    event.preventDefault()
                }
            },
            /**
             * updateProducts() sends the product data up to the parent.
             */
            updateProduct(value, type) {
                if (type === 'delete') {
                    this.$emit('delete')
                    return
                }
                this.productData[type] =  value
                console.log('#################################')
                console.log('Here in updateProduct()')
                console.log('#################################')
                this.setValidationStates()
                this.$emit('update', {
                    encrProductData: this.productData,
                    isValid: !Object.values(this.productValidationStates).includes('invalid')
                })
            },
            setValidationStates() {
                console.log('#################################')
                console.log('Here in setValidationStates()')
                console.log(this.productData.contractId)
                console.log('#################################')
                this.productValidationStates.contractId = this.productData.contractId.length !== 7 ?  'invalid' : 'valid'
                switch (this.productData.caseId.length) {
                    case 0:
                        this.productValidationStates.caseId = 'reset'
                        break
                    case 8:
                        this.productValidationStates.caseId = 'valid'
                        break
                    default:
                        this.productValidationStates.caseId = 'invalid'
                        break
                }
            }
        },
        created() {
            this.setValidationStates()
        },
        updated() {
            console.log('I just updated', this.options)
        }
    }
</script>

В моем модульном тесте я пытаюсь установить значение для b-form-input и вызвать событие input и / или change, чтобы данные this.productData.contractId в компоненте обновлялись:

import Vuex from 'vuex'
import BootstrapVue from 'bootstrap-vue'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import EnercareLineItem from '../../resources/assets/js/components/formfields/enercare/EnercareLineItem'
import BaseField from '../../resources/assets/js/components/BaseField'
​
const Vue = createLocalVue()
Vue.use(Vuex)
Vue.use(BootstrapVue)
​
describe('EnercareLineItem', () => {
  describe('Contract Id input', () => {
    it('is valid at a length of 7', () => {
      let options = {
        index: 0,
        name: 'Hot Water Heater Tune Up',
        contractId: '',
        appointmentTime: '2018-01-01T12:00:00Z',
        caseId: ''
      }
​
      const wrapper = shallowMount(EnercareLineItem, {
        propsData: { options }
      })
​
      const contractIdInput = wrapper.find('#contract-id-input > b-form-input')
      expect(contractIdInput.attributes().state).toBe('invalid')
      contractIdInput.element.value = '1234567'
      contractIdInput.trigger('input')
      expect(contractIdInput.attributes().state).toBe('valid')
    })
  })
})

Использование contractIdInput.trigger('input') does run the updateProduct ($ event, 'contractId') method, evidenced by the console.log in the updateProduct method. It then goes into the setValidationStates () method. Once there, the console.log (this.productData.contractId) produces different results between running the unit test and running it in the browser. In the unit test, the value returned from the console.log is Событие {isTrusted: [Получатель]} . When I run the same code in Chrome, the initial консоль.log is an empty string. Then when I add values to the b-form-input field, the console.log` выводит значения, которые я ввел в это поле.

Мой первый вопрос: что мне нужно сделать, чтобы обновить ввод в * 1024?* поле таким образом, чтобы мой тест получал правильные значения?

Мой второй (и менее важный вопрос) вопрос: почему я получаю Event { isTrusted: [Getter] } console.log исключено, когда я запускаю свои модульные тесты?