How to test prop methods with vue-test-utils and vue?

Question

I have a child component which has a onBilling method passed from its parent as a prop:

I can see in my unit test the console log is getting fired, but not my assertion for the onBillingValid function is not working---- do I have to use wrapper.SetMethods? Couldn't find much documentation on passing callback methods as props, let alone testing them

<script>
export default {
  name: 'AddressForm',
  $_veeValidate: {
    validator: 'new'
  },
  props: {
    billingAddress: {
      type: Object,
      default: Object
    },
    onBillingValid: {
      type: Function,
      default: Function
    }
  },
  watch: {
    billingAddress: {
      handler(newId, oldId) {
        this.$validator.validateAll().then((result) => {
            console.log("validity of billing from address child", result)
            // notify identity parent that billing Form is valid or invalid
            this.onBillingValid(result);
        })
      },
      deep: true
    }
  },
  mounted () {
    this.$validator.localize('en-US', this.dictionary)
  }
}
</script>

Unit test:

  it('should trigger watcher and call onBillingValid when billingAddress prop is modified', () => {
    const $validator = new VeeValidate.Validator()
    const errors = {
      collect: jest.fn()
    }

    const wrapper = shallow(AddressForm, {
      mocks: { errors, $t, $validator },
      propsData: {
        billingAddress: {
          fullName: 'john doe',
          address: '',
          city: '',
          state: '',
          postalCode: ''
        },
        onBillingValid: jest.fn()
      }
    })

    const spy = jest.spyOn(wrapper.vm, 'onBillingValid')
    // trigger watcher
    wrapper.setProps({
      billingAddress: {
        fullName: 'jane doe',
        address: '',
        city: '',
        state: '',
        postalCode: ''
      }
    })
    expect(spy).toHaveBeenCalledTimes(1) // not working
  })

acdcjunior · Accepted Answer · 2018-04-18 14:54:11Z

2

In:

onBillingValid: jest.fn()

jest.fn() already returns a mock function.

So no need to have (delete it):

const spy = jest.spyOn(wrapper.vm, 'onBillingValid')

And just use:

expect(wrapper.vm.onBillingValid).toHaveBeenCalledTimes(1)

answered Apr 18, 2018 at 14:54

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to test prop methods with vue-test-utils and vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related