{{ message }}
Repository navigation
Bug: Errors during $setup are hidden and cause the template to be rendered with undefined properties #2319
Description
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
Activity
lmiller1990 commentedon Jan 29, 2024
I reproduced with your example
lmiller1990 commentedon Jan 29, 2024
Related? vuejs/core#7020
lmiller1990 commentedon Jan 29, 2024
It looks like this can be 'fixed' by removing
test-utils/src/mount.ts
Lines 77 to 82 in bd21a8e
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 likeerrorOnSetupOrCreate(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.tsto try and to get everything passing.voidus commentedon Jan 30, 2024
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 commentedon Jan 30, 2024
Don't everyone submit a PR at once!
voidus commentedon Feb 21, 2024
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?
fix(mount): throw the first error encountered during mount (#2428)
fix(mount): throw the first error encountered during mount (vuejs#2428)