Bug: Errors during $setup are hidden and cause the template to be rendered with undefined properties

[voidus]

Describe the bug

When an error is thrown in the setup, it is silently ignored and the template is rendered with all variables set to undefined.

I cannot confidently exclude that this is a misconfiguration, so if there's anything I should check please let me know. Either way, this is very confusing and cost me quite some time, so if we can prevent this from happening that would be great.

To Reproduce

<template>
  <p>{{ x.y }}</p>
</template>

<script setup lang="ts">
const x = { y: 42 };
const props = defineProps<{ shouldFail: boolean }>();
if (props.shouldFail) throw new Error('rip');
</script>

import { mount } from '@vue/test-utils'
import TestComponent from './TestComponent.vue'
import { expect, it } from 'vitest'

it('works usually (this one works)', async () => {
  const wrapper = mount(TestComponent, {
    props: { shouldFail: false }
  })
  expect(wrapper.text()).toContain('42')
})
it('shows the error (this one does not)', async () => {
  const wrapper = mount(TestComponent, {
    props: { shouldFail: true }
  })
  expect(wrapper.text()).toContain('42')
})

Expected behavior

The error should be presented to the developer

Actual output

yarn workspace v1.22.19
yarn run v1.22.19
$ vitest TestComponent
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

 DEV  v0.34.6 /home/voyd/Coding/cannahaus/casoma/frontend

 ❯ src/pages/TestComponent.vitest.test.ts (2)
   ✓ works usually (this one works)
   × shows the error (this one does not)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/pages/TestComponent.vitest.test.ts > shows the error (this one does not)
TypeError: Cannot read properties of undefined (reading 'y')
 ❯ Proxy._sfc_render src/pages/TestComponent.vue:2:11
      1| <template>
      2|   <p>{{ x.y }}</p>
       |           ^
      3| </template>
      4| 
 ❯ renderComponentRoot ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:830:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5745:46
 ❯ ReactiveEffect.run ../node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ instance.update ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5858:51
 ❯ setupRenderEffect ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5866:5
 ❯ mountComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5656:5
 ❯ processComponent ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5609:9
 ❯ patch ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5095:11
 ❯ ReactiveEffect.componentUpdateFn [as fn] ../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5752:11

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  21:44:53
   Duration  425ms (transform 60ms, setup 0ms, collect 96ms, tests 18ms, environment 100ms, prepare 61ms)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Related information:

envinfo is doing weird things, here's my versions though

• vue: 3.3.12
• @vue/test-utils: 2.4.3
• vitest: 0.34.6
• jest: 29.7.0

This is in a recently set up quasar 2.14.1 project.

Additional context

[lmiller1990]

I reproduced with your example

[lmiller1990]

Related? vuejs/core#7020

[lmiller1990]

It looks like this can be 'fixed' by removing

test-utils/src/mount.ts

Lines 77 to 82 in bd21a8e

	let errorOnMount = null
	app.config.errorHandler = (err, instance, info) => {
	errorOnMount = err
	return originalErrorHandler?.(err, instance, info)
	}

It looks like we need to swallow the error, so we can mount your component, then report on errors. Instead of errorOnMount, I wonder if we should be doing something like errorOnSetupOrCreate (to support both Options and Composition API).

I wonder if you would be interested in trying to fix this? You can start work by cloning the repo, adding your test case, run in watch mode, and modify the src/mount.ts to try and to get everything passing.

[voidus]

Thank you so much for your swift response. I'll try to find some time to look into it, but if anyone else is curious don't let that stop you.

[lmiller1990]

Don't everyone submit a PR at once!

[voidus]

I can confirm that removing that block fixes the problem, but I don't know vue enough to understand vuejs/core#7020 so I'm not sure if it's a good idea?