Vue: Testing component with props validation

[ChangJoo-Park]

Vue.js version

2.1.4

Reproduction Link

Steps to reproduce

Component A

<template lang="pug">
  div.header
    h2.header--date {{nowDate}}
    h3.header--time {{nowTime}}
</template>
<script>
export default {
  props: {
    nowDate: {
      type: String,
      required: true
    },
    nowTime: {
      type: String,
      required: true
    }
  }
}
</script>

Test

  it('should date and time are string', () => {
    const vm = getViewModel(AppHeader, {nowDate: 1, nowTime: 1})
  })

Helper Method

function getViewModel (Component, propsData) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData }).$mount()
  return vm
}

ERROR LOG: '[Vue warn]: Invalid prop: type check failed for prop "nowDate". Expected String, got Number.
(found in root instance)'
ERROR LOG: '[Vue warn]: Invalid prop: type check failed for prop "nowTime". Expected String, got Number.
(found in root instance)

How to test invalid prop type?

What is Expected?

expect(vm).to.throws()

I expected test passed but AssertionError: expected { Object (_uid, _isVue, ...) } to be a function

What is actually happening?

pass test

[yyx990803]

Vue warnings are not thrown errors. You can spy on console.error to assert Vue warnings.

[matrunchyk]

I managed to achieve the spying on console.error as @yyx990803 suggested:

it('fails if no prop passed', () => {
        const errors = [];
        const oldError = console.error;  // eslint-disable-line

        console.error = error => errors.push(error); // eslint-disable-line
        getViewModel(YourComponentName);
        // Copy&Paste a Vue warning below
        expect(
            errors.find(error => error.indexOf('Missing required prop: "visible"') > -1)
        ).to.not.equal(undefined);
        console.error = oldError;  // eslint-disable-line
    });

Or you can use sinon.spy(console, "log");