how to test vuejs props with Typescript + Jest

Viewed 470

i have the following prop in a single file component (Nuxt.js)

export default {
  props: {
    message: {
      type: String,
      required: true,
      validator: (value) => {
        return ['a', 'b', 'c'].includes(value)
      }
    }
  }
}

I would like to test everything regarding this message property, so I created a test

Test.spec.js

it('should be required, a String and validates correctly', () => {
  const wrapper = shallowMount(Test, {
    propsData: {
      message: 'a',
    }
  })
  const messageProp = wrapper.vm.$options.props.message

  expect(messageProp.required).toBeTruthy()
  expect(messageProp.type).toBe(String)
  expect(messageProp.validator('a')).toBeTruthy()
  expect(messageProp.validator('x')).toBeFalsy()
})

Everything works perfectly, no errors.

But when I try to do the same with Typescript (Nuxt.js + Typescript)

<script lang="ts">
import Vue, { PropOptions } from 'vue'

export default Vue.extend({
  props: {
    message: {
      type: String,
      required: true,
      validator: (value) => {
        return ['a', 'b', 'c'].includes(value)
      }
    } as PropOptions<string>
  }
})
</script>

I get this error Test.spec.ts

enter image description here

console.log(wrapper.vm.$options.props)

enter image description here

can someone help me make this work or a better way that i can test everything regarding the props?

0 Answers
Related