mountSuspended does not render Options API's data and computed properties

[inouetakuya]

Environment

---

• Operating System: Darwin
• Node Version: v18.19.0
• Nuxt Version: 3.12.4
• CLI Version: 3.13.2
• Nitro Version: 2.9.7
• Package Manager: npm@10.2.3
• Builder: -
• User Config: compatibilityDate, devtools
• Runtime Modules: -

• Build Modules: -

Reproduction

https://stackblitz.com/~/github.com/inouetakuya/nuxt-test-utils-playground/pull/3

GitHub: https://github.com/inouetakuya/nuxt-test-utils-playground/pull/3

Describe the bug

Here is the page component using the Options API.

<script lang="ts">  
export default defineNuxtComponent({  
  name: 'OptionsApiPage',  
  setup() {  
    return {  
      greetingInSetup: 'Hello, setup!',  
    };  
  },  
  async asyncData() {  
    return {  
      greetingInAsyncData: 'Hello, asyncData!',  
    };  
  },  
  data() {  
    return {  
      greetingInData: 'Hello, data!',  
    };  
  },  
  computed: {  
    greetingInComputed() {  
      return 'Hello, computed property!';  
    },  
  },  
});  
</script>  

<template>  
  <p data-testid="greeting-in-setup">greetingInSetup: {{ greetingInSetup }}</p>  
  <p data-testid="greeting-in-async-data">  
    greetingInAsyncData: {{ greetingInAsyncData }}  
  </p>  
  <p data-testid="greeting-in-data">greetingInData: {{ greetingInData }}</p>  
  <p data-testid="greeting-in-computed">  
    greetingInComputed: {{ greetingInComputed }}  
  </p>  
</template>

When testing this page component using the mountSuspended method, the data and computed properties of the Options API are not rendered.

On the other hand, if the same page component is tested with the mount method, both the Options API data and the computed properties are rendered.

import { mountSuspended } from '@nuxt/test-utils/runtime';  
import { mount, flushPromises } from '@vue/test-utils';  
import OptionsApiPage from '~/pages/options-api.vue';  

describe('OptionsApiPage', () => {  
  let wrapper;  

  describe('Using mountSuspended', () => {  
    beforeEach(async () => {  
      wrapper = await mountSuspended(OptionsApiPage, {  
        route: '/options-api',  
      });  
    });  

    it('should render greeting in setup', () => {  
      expect(wrapper.find('[data-testid="greeting-in-setup"]').text()).toBe(  
        'greetingInSetup: Hello, setup!',  
      );  
    });  

    it('should render greeting in asyncData', () => {  
      expect(  
        wrapper.find('[data-testid="greeting-in-async-data"]').text(),  
      ).toBe('greetingInAsyncData: Hello, asyncData!');  
    });  

    it('should render greeting in data', () => {  
      expect(wrapper.find('[data-testid="greeting-in-data"]').text()).toBe(  
        'greetingInData: Hello, data!',  
      );  
    });  

    it('should render greeting in computed', () => {  
      expect(wrapper.find('[data-testid="greeting-in-computed"]').text()).toBe(  
        'greetingInComputed: Hello, computed property!',  
      );  
    });  
  });  

  describe('Using mount', () => {  
    beforeEach(async () => {  
      const component = defineComponent({  
        components: { OptionsApiPage },  
        template: '<Suspense><OptionsApiPage /></Suspense>',  
      });  
      wrapper = mount(component);  
      await flushPromises();  
    });  

    it('should render greeting in setup', () => {  
      expect(wrapper.find('[data-testid="greeting-in-setup"]').text()).toBe(  
        'greetingInSetup: Hello, setup!',  
      );  
    });  

    it('should render greeting in asyncData', () => {  
      expect(  
        wrapper.find('[data-testid="greeting-in-async-data"]').text(),  
      ).toBe('greetingInAsyncData: Hello, asyncData!');  
    });  

    it('should render greeting in data', () => {  
      expect(wrapper.find('[data-testid="greeting-in-data"]').text()).toBe(  
        'greetingInData: Hello, data!',  
      );  
    });  

    it('should render greeting in computed', () => {  
      expect(wrapper.find('[data-testid="greeting-in-computed"]').text()).toBe(  
        'greetingInComputed: Hello, computed property!',  
      );  
    });  
  });  
});

Additional context

No response

Logs

$ npm test

> test
> vitest run

 RUN  v2.0.5 /Users/inouetakuya/src/github.com/inouetakuya/nuxt-test-utils-playground

stdout | pages/script-setup.nuxt.spec.ts
<Suspense> is an experimental feature and its API will likely change.

stdout | pages/options-api.nuxt.spec.ts
<Suspense> is an experimental feature and its API will likely change.

 ❯ pages/options-api.nuxt.spec.ts (8)
   ❯ OptionsApiPage (8)
     ❯ Using mountSuspended (4)
       ✓ should render greeting in setup
       ✓ should render greeting in asyncData
       × should render greeting in data
       × should render greeting in computed
     ✓ Using mount (4)
 ✓ pages/script-setup.nuxt.spec.ts (1)
 ✓ utils/example-util.spec.ts (1)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  pages/options-api.nuxt.spec.ts > OptionsApiPage > Using mountSuspended > should render greeting in data
AssertionError: expected 'greetingInData:' to be 'greetingInData: Hello, data!' // Object.is equality

Expected: "greetingInData: Hello, data!"
Received: "greetingInData:"

 ❯ pages/options-api.nuxt.spec.ts:28:71
     26|
     27|     it('should render greeting in data', () => {
     28|       expect(wrapper.find('[data-testid="greeting-in-data"]').text()).toBe(
       |                                                                       ^
     29|         'greetingInData: Hello, data!',
     30|       );

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

 FAIL  pages/options-api.nuxt.spec.ts > OptionsApiPage > Using mountSuspended > should render greeting in computed
AssertionError: expected 'greetingInComputed:' to be 'greetingInComputed: Hello, computed p…' // Object.is equality

Expected: "greetingInComputed: Hello, computed property!"
Received: "greetingInComputed:"

 ❯ pages/options-api.nuxt.spec.ts:34:75
     32|
     33|     it('should render greeting in computed', () => {
     34|       expect(wrapper.find('[data-testid="greeting-in-computed"]').text()).toBe(
       |                                                                           ^
     35|         'greetingInComputed: Hello, computed property!',
     36|       );

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯

 Test Files  1 failed | 2 passed (3)
      Tests  2 failed | 8 passed (10)
   Start at  16:38:07
   Duration  740ms (transform 303ms, setup 513ms, collect 188ms, tests 41ms, environment 237ms, prepare 331ms)