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

[lutejka]

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: [email protected]
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxt/test-utils/[email protected]
• 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]

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/@[email protected]_@[email protected][email protected][email protected][email protected][email protected]_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/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:868:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5922:46
 ❯ ReactiveEffect.run node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.cjs.js:174:19
 ❯ instance.update node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6053:16
 ❯ setupRenderEffect node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6063:5
 ❯ node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1613:9

[gbyesiltas]

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]

also facing this same error. hopefully this gets resolved soon

[Wompfy]

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]

It seems that this is happening whenever you

Both of these will throw the error:

const { data, error } = useMyQuery()

const error = ref(false)

[cory-baker]

It seems that this is happening whenever you

Both of these will throw the error:

const { data, error } = useMyQuery()

const error = ref(false)

this was the issue for me. renaming my variable from error to err fixed it.

Definitely a bug though

[Shuunen]

super weird, got a const showError = ref(false); that produce the same issue, renamed it to showAlert and it works....

¯\(ツ)/¯

[lutejka]

The issue is that this line fails, when some prop is already in the setupState of the component instance. But idk where e.g. the error prop in the setupState comes from.

https://github.com/nuxt/test-utils/blob/ba1fa2d91bd7db6102af9c3a7048745189f39086/src/runtime-utils/mount.ts#L114-L116

During dev mode does not allow overwriting this.

https://github.com/vuejs/core/blob/db374e54c9f5e07324728b85c74eca84e28dd352/packages/runtime-core/src/componentPublicInstance.ts#L433-L440

[patrickyue]

not only error like this, looks like URL is also not working on this I cant binding props URL to component with HTML tag I need to change the props URL key to some other name

[gbyesiltas]

Hey guys, I can imagine people who are working on this package are very busy and I don't want to be annoying but I think the fact that your tests fail whenever you have a variable called error in your component is a pretty big issue and makes this package pretty much unusable for us :,(

[WatCodeDatCode]

After updating from 3.13.1 to 3.14 I have now started experiencing this issue where multiple tests started failing. Any test with error as well as results as props to be precise. Renaming the props solves the issue, but causes having to use less simple/clear props.

[rinux55]

After updating to 3.14, a lot of our tests broke as well with this error. @danielroe tagging you to see if you are aware of this issue, have you encountered this before?

[danielroe]

Could this be related to a Vue upgrade? Would you try pinning Vue to the previous version?

[rinux55]

Could this be related to a Vue upgrade? Would you try pinning Vue to the previous version?

@danielroe tried downgrading down to vue down to 3.4.0, (and 3.3, but then more stuff broke), the problem persisted. Also checked if it could be related to vite. downgraded to 3.5.3, but the problem persisted. This problem only arises for us with the latest version of test utils. I'll see if I can get a reproduction ready.

[smartin88]

any news on this issue? it's currently unusable, and i don't really have the time to go through my app and change the names of hundreds of variables just because of this bug :-/

[rinux55]

@danielroe I have a minimal reproduction ready. https://stackblitz.com/~/github.com/rinux55/nuxt-684-error?file=test.json

Running the tests will trigger the error. Super weird because it's all the latest packages with a minimal install. Same happens with @vue/test-utils and mountSuspended. Could you have a look?

[stafyniaksacha]

I can also reproduce the isssue when a component has an error property like:

<script setup lang="ts">
const props = defineProps<{
  error?: string;
}>();
</script>

<template>
  <span>{{ props.error }}</span>
</template>

import { mountSuspended } from '@nuxt/test-utils/runtime';
import { describe, expect, it } from 'vitest';
import MyComp from './MyComp.vue';

describe('MyComp', () => {
  it('should render', async () => {
    const comp = await mountSuspended(MyComp);
    const span = comp.find('span');
    expect(span.text()).toBe('');
  });
});

repro: https://stackblitz.com/edit/nuxt-starter-sgmw2d?file=components%2FMyComp.spec.ts,components%2FMyComp.vue

commenting those lines seems to fix the issue, but it may have side effects: https://github.com/nuxt/test-utils/blob/4c6eaf5027612f913ffe1c4edf730d227519a30a/src/runtime-utils/mount.ts#L133-L135

note that this is working with @vue/test-utils: https://stackblitz.com/edit/vitejs-vite-nynq7r?file=comp.test.ts

[fancyfootwork]

Any update on this? I am also seeing this bug:

TypeError: 'set' on proxy: trap returned falsish for property 'error'
 ❯ Proxy.clonedComponent.render node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:147:44

Pertinent devDependencies:

"@nuxt/test-utils": "^3.14.4", "@pinia/testing": "^0.1.7", "jsdom": "^25.0.1", "vitest": "^2.1.4"

[gavinlight]

bump

[sebbayer]

@danielroe sorry to revive this topic, but I believe https://github.com/nuxt/test-utils/pull/1025 in 3.15.0 only fixed it for props, not for data properties. I still get the same error message with a data property named error:

    data () {
        return {
            error: false,
        }
    }

A workaround for now is to rename error to something else.

[datsenkoboos]

I'm still experiencing the issue with the latest version of the package(

[danielroe]

Does this work in the latest release? 🙏

[sebbayer]

Does this work in the latest release? 🙏

I can confirm this is now working in 3.17.1, but I have to define that property in Vue Options API in a setup block instead of data, otherwise I get a warning:

[Vue warn]: Cannot mutate

[gbyesiltas]

For us, the biggest issue of not being able to have variables with name error is fixed. But we still have issues with components where there is a prop called error

[sebbayer]

Still the same issue with a prop named results with mountSuspended as well.

[adamdehaven]

https://github.com/nuxt/test-utils/issues/684#issuecomment-2071361252

This is still broken for a prop name of url

[sebbayer]

Props named results or url still broken in 3.19.1

[ibyteyou]

I encountered a similar bug in 3.7.3 in my case, it was with validator with useVuelidate in store. But! I found out that in this version of Nuxt, provided that we switch from one page to another, but at the same time the same component is declared on both pages (with different props), something unimaginable happens. In my project, the onBeforeMounted hook is used everywhere, and the developer described in sufficient detail the store that is used on both pages, but did not take into account some of the nuances of cleaning and resetting. When I logically approached the solution and used onBeforeUnmount or onUnmounted, I found out that in the case described above, when redirecting, the new instance of the component is first mounted, and only then the old one is unmounted. Replacing onBeforeMounted with onMounted fixed this race. I hope this information will help in solving the bug.✨✨✨

[yamachi4416]

https://stackblitz.com/edit/github-gee6qy-95mlc4ma