mountSuspended fails: 'set' on proxy: trap returned falsish for property 'error'

lutejka commented 9 months ago

Environment

Operating System: Darwin
Node Version: v20.8.1
Nuxt Version: 3.9.0
CLI Version: 3.10.0
Nitro Version: 2.8.1
Package Manager: yarn@1.22.19
Builder: -
User Config: devtools, modules
Runtime Modules: @nuxt/test-utils/module@3.9.0
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-gee6qy?file=app.vue

Describe the bug

Once I expose a variable called error within the setup, the component fails to render.
Since everything works within the dev server / build, I suspect this is something within @nuxt/test-utils

After renaming the error variable to something else, the component can be mounted within the tests again.

Additional context

No response

Logs

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TypeError: 'set' on proxy: trap returned falsish for property 'error'
 ❯ clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:128:44
    126|                         renderContext[key] = passedProps[key];
    127|                       }
    128|                       return render.call(this, renderContext, ...args);
       |                                            ^
    129|                     } : void 0,
    130|                     setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:868:16
 ❯ ReactiveEffect.componentUpdateFn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5922:46
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:174:19
 ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6053:16
 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6063:5
 ❯ eval node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1613:9

This error originated in "test/app.nuxt.test.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "Should mount". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- This was the last recorded test before the error was thrown, if error originated after test finished its execution.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

DavidWard98 commented 9 months ago

I get a very similar error when using i18n + mountSuspended. This code worked before I upgraded from the old nuxt-vitest to this package.

Setup file:

// vitest setup file
import { config } from '@vue/test-utils'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  messages: {},
  missingWarn: false,
  fallbackWarn: false,
})

config.global.plugins.push(i18n)
config.global.mocks.t = (key: string) => key

Test example:

// example test
it('should display an empty message', async () => {
  const wrapper = await mountSuspended(component)

  const el = wrapper.find('div')
  expect(el.text()).toContain('translation.key.i.am.testing')
})

Error:

TypeError: 'set' on proxy: trap returned falsish for property 't'
 ❯ Proxy.clonedComponent.render node_modules/.pnpm/@nuxt+test-utils@3.9.0_@vue+test-utils@2.4.3_h3@1.9.0_happy-dom@11.2.0_vite@5.0.10_vitest@1.1_d2uy472anfacmqjz42f5nwql6e/node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:128:44
    126|                         renderContext[key] = passedProps[key];
    127|                       }
    128|                       return render.call(this, renderContext, ...args);
       |                                            ^
    129|                     } : void 0,
    130|                     setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0
 ❯ renderComponentRoot node_modules/.pnpm/@vue+runtime-core@3.4.3/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:868:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/.pnpm/@vue+runtime-core@3.4.3/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5922:46
 ❯ ReactiveEffect.run node_modules/.pnpm/@vue+reactivity@3.4.3/node_modules/@vue/reactivity/dist/reactivity.cjs.js:174:19
 ❯ instance.update node_modules/.pnpm/@vue+runtime-core@3.4.3/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6053:16
 ❯ setupRenderEffect node_modules/.pnpm/@vue+runtime-core@3.4.3/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6063:5
 ❯ node_modules/.pnpm/@vue+runtime-core@3.4.3/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1613:9

gbyesiltas commented 9 months ago

I am getting the exact same error with @tanstack/vue-query, specifically when I'm using the error that's returned by useQuery. And indeed, changing the name of the error variable fixes the issue :D

Minh-ctrl commented 9 months ago

also facing this same error. hopefully this gets resolved soon

Wompfy commented 8 months ago

I am facing this error "trap returned falsish for property 'nuxtApp'" when using 'nuxtApp = useNuxtApp()' in my vue files. As I use this in all my page files that utilize useAsyncData() (as all my fetch operations are bundled in service classes via a plugin) I cannot use this library at all anymore after migrating from nuxt-vitest.

tdebooij commented 7 months ago

It seems that this is happening whenever you Githubissues.

Githubissues is a development platform for aggregating issues.

nuxt / test-utils