Giters

nuxt / test-utils

🧪 Test utilities for Nuxt

Home Page:http://nuxt.com/docs/getting-started/testing

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Test fail if component contain const error = ref(false);

xibman opened this issue · comments

commented

Environment

  • Operating System: Darwin
  • Node Version: v18.20.2
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: yarn@3.6.1
  • Builder: -
  • User Config: devtools, build, modules, fonts, colorMode, i18n, logLevel, nitro, sentry, runtimeConfig
  • Runtime Modules: nuxt-zod-i18n@latest, @nuxtjs/i18n@8.3.1, @nuxt/ui@^2.15.2, @nuxt/test-utils/module@3.12.1, @nuxt/fonts@latest, @vueuse/nuxt@10.9.0
  • Build Modules: -

Reproduction

Just create a simple component with :

<script lang="ts" setup>
const error = ref(false);
</script>

Simple test

it('mount', async () => {
    const component = await mountSuspended(TheFooter);
    expect(component.html()).toMatchSnapshot();
  });

Describe the bug

TypeError: 'set' on proxy: trap returned falsish for property 'error'
 ❯ Proxy.clonedComponent.render ../../../node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs:131:44
    129|                         renderContext[key] = passedProps[key];
    130|                       }
    131|                       return render.call(this, renderContext, ...args);
       |                                            ^
    132|                     } : void 0,
    133|                     setup: setup ? (props2) => wrappedSetup(props2, setupContext) : void 0
 ❯ renderComponentRoot ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:885:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5969:46
 ❯ ReactiveEffect.run ../../../node_modules/@vue/reactivity/dist/reactivity.cjs.js:181:19
 ❯ instance.update ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6100:16
 ❯ setupRenderEffect ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6110:5
 ❯ ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1639:9

Additional context

No response

Logs

No response

commented

The error you're encountering is likely due to Vue's reactivity system trying to track or modify a property on a reactive object that hasn't been properly initialized. Here's how you can address this issue:

  1. Ensure all reactive properties are initialized: Before modifying or tracking properties on a reactive object, make sure they are initialized. This is important because Vue 3's reactivity system, which relies on JavaScript Proxies, needs to be aware of these properties to track their changes.

  2. Handle dynamic properties correctly: If your component or test dynamically adds new properties to a reactive object, you must ensure these properties are made reactive. This can be achieved by reassigning the reactive object with a new object that includes the new property, using either the spread operator or Object.assign.

  3. Check your mountSuspended usage: Make sure that the component and any props passed to it are correctly set up. If your component's setup function or test setup involves dynamically adding properties to objects, these properties should be initialized beforehand.

  4. Debugging: If the problem persists, add debug statements to verify that all expected properties are present and reactive before any operations are performed on them.

Here's an example of how to handle dynamic properties in a reactive object within Vue 3:

// Assuming `reactiveObject` is a reactive object and you need to add a new property
const newProperty = { key: 'value' };
// Reassign the object to include the new property, maintaining reactivity
reactiveObject = reactive({ ...reactiveObject, ...newProperty });

This ensures Vue's reactivity system can track the new property, helping to avoid the error you're facing. For more detailed guidance, consider reviewing the source code of the @nuxt/test-utils package, especially the implementation of mountSuspended.

Details

Sources


About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

commented

If the constant is renamed to formError for example the problem disappear !

commented

Seems like this is the same issue as in #684

commented

Closing in favor of #684