feat: automatically fail Cypress test on Vue-caught error

Author: bahmutov

cypress/component/basic/translated-message-spec.js

@@ -1,10 +1,11 @@
+/// <reference types="cypress" />
+
 // testing i18n component
 // http://kazupon.github.io/vue-i18n
 import TranslatedMessage from './TranslatedMessage.vue'
 import VueI18n from 'vue-i18n'
 import { mountCallback } from 'cypress-vue-unit-test'
 
-/* eslint-env mocha */
 // https://github.com/bahmutov/cypress-vue-unit-test/issues/332
 describe.skip('VueI18n', () => {
   // need to use VueI18n as a plugin

src/index.ts

@@ -286,6 +286,20 @@ interface MountOptions {
  */
 type MountOptionsArgument = Partial<ComponentOptions & MountOptions>
 
+/**
+ * Direct Vue errors to the top error handler
+ * where they will fail Cypress test
+ * @see https://vuejs.org/v2/api/#errorHandler
+ * @see https://github.com/cypress-io/cypress/issues/7910
+ */
+function failTestOnVueError(err, vm, info) {
+  console.error(`Vue error 🔥`)
+  console.error(err)
+  console.error('component:', vm)
+  console.error('info:', info)
+  window.top.onerror(err)
+}
+
 /**
  * Mounts a Vue component inside Cypress browser.
  * @param {object} component imported from Vue file
@@ -351,6 +365,8 @@ export const mount = (
     .then((win) => {
       // @ts-ignore
       win.Vue = Vue
+      // @ts-ignore
+      win.Vue.config.errorHandler = failTestOnVueError
 
       // @ts-ignore
       const document: Document = cy.state('document')