How can I automatically test that all required properties are supplied to child components?

Question

We repeatedly run into an issue with our Vuejs application where not all required properties are passed to child components.

A short example using Typescript with Vue-Property-Decorator.

@Component
export default class MyChildComponent extends Vue {
  @Prop({ required: true }) text: string
}

<template>
  <my-child-component /> <!-- This is missing the 'text' property -->
</template>

When attempting to display such a component in the browser, issues often become apparent and the console logs an error. However, this requires someone to actually visit all pages that contain components with required props, resulting in a large amount of manual work.

Is it possible to ensure that required props are set?

We are using vue-test-utils to test our Vue components and use shallowMount to construct our parent components in tests.

I can think of two ways that would be acceptable but I do not know how to implement them:

• unit tests
• linter rule that warns about unprovided properties

Other ways may be acceptable as well but it needs to be automatable and fail a test or break the build.