this in Options API methods is undefined, using mountSuspended

[inouetakuya]

Environment

---

• Operating System: Darwin
• Node Version: v20.18.0
• Nuxt Version: 3.12.4
• CLI Version: 3.13.2
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

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

GitHub: inouetakuya/nuxt-test-utils-playground#6

Describe the bug

Here is the page component using the Options API.

<template>
  <ul>
    <li>
      <button data-testid="native-button" @click="onClickNativeButton">
        Native button
      </button>
    </li>
    <li>
      <TestButton @test-click="onClickButtonInComponent" />
    </li>
  </ul>
</template>

<script lang="ts">
import TestButton from '~/components/TestButton.vue';

export default defineNuxtComponent({
  name: 'OptionsApiPage',
  components: { TestButton },
  methods: {
    onClickNativeButton() {
      if (this === undefined) {
        console.error('this in onClickNativeButton is undefined');
      }
    },
    onClickButtonInComponent() {
      if (this === undefined) {
        console.error('this in onClickButtonInComponent is undefined');
      }
    },
  },
});
</script>

When options API methods catch events from components, this is undefined.

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

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

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

    describe('on events', () => {
      beforeEach(() => {
        vi.spyOn(console, 'error').mockImplementation((message) => {
          console.log('[spy] console.error has been called', message);
        });
      });

      afterEach(() => {
        vi.restoreAllMocks();
      });

      it('should not output error when native button is clicked', async () => {
        await wrapper.find('[data-testid="native-button"]').trigger('click');
        expect(console.error).not.toHaveBeenCalled();
      });

      it('should not output error when button in component is clicked', async () => {
        await wrapper.find('[data-testid="test-button"]').trigger('click');

        // console.error has been called because this is undefined!!
        expect(console.error).not.toHaveBeenCalled();
      });
    });
  });
});

Additional context

@vue/test-utils doesn't have this issue.

Logs

$ npm test pages/options-api.nuxt.spec.ts

> test
> vitest run pages/options-api.nuxt.spec.ts


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

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

stdout | pages/options-api.nuxt.spec.ts > OptionsApiPage > Using mountSuspended > on events > should not output error when button in component is clicked
[spy] console.error has been called this in onClickButtonInComponent is undefined

 ❯ pages/options-api.nuxt.spec.ts (12)
   ❯ OptionsApiPage (12)
     ❯ Using mountSuspended (6)
       ✓ should render greeting in setup
       ✓ should render greeting in data and asyncData
       ✓ should render greeting in computed
       ✓ should render greeting in methods
       ❯ on events (2)
         ✓ should not output error when native button is clicked
         × should not output error when button in component is clicked
     ✓ Using mount (6)
       ✓ should render greeting in setup
       ✓ should render greeting in data and asyncData
       ✓ should render greeting in computed
       ✓ should render greeting in methods
       ✓ on events (2)
         ✓ should not output error when native button is clicked
         ✓ should not output error when button in component is clicked

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  pages/options-api.nuxt.spec.ts > OptionsApiPage > Using mountSuspended > on events > should not output error when button in component is clicked
AssertionError: expected "error" to not be called at all, but actually been called 1 times

Received:

  1st error call:

    Array [
      "this in onClickButtonInComponent is undefined",
    ]


Number of calls: 1

 ❯ pages/options-api.nuxt.spec.ts:72:35
     70|       it('should not output error when button in component is clicked', async () => {
     71|         await wrapper.find('[data-testid="test-button"]').trigger('click');
     72|         expect(console.error).not.toHaveBeenCalled();
       |                                   ^
     73|       });
     74|     });

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

 Test Files  1 failed (1)
      Tests  1 failed | 11 passed (12)
   Start at  22:42:02
   Duration  704ms (transform 216ms, setup 214ms, collect 100ms, tests 37ms, environment 70ms, prepare 121ms)