Using createError in component causes false positives and VITEST_AFTER_ENV_TEARDOWN unhandled error

[Katie-Adams]

Describe the bug

We're running a Nuxt 3 app and using Vitest with vue-test-utils to create unit tests. Up until now, no problems.
The tests I'm currently writing should catch if there's an issue with an ID we're seeking and, if so, redirect the app to our 404 page. We achieve this using the createError function provided by Nuxt.

By all accounts the test I've written should - and does - pass. However, when I run the test, I get the below error message:
TypeError: Cannot set properties of undefined (setting 'VITEST_AFTER_ENV_TEARDOWN')

I can't fathom how to fix this error; the problem seems related to the createError function used in my Nuxt app, because when it is commented out, the test passes without the unhandled error.

Reproduction

Nuxt 3 component, examples of where the createError is used

onMounted(async () => {
  if (route.query && route.query.giftId) {
    giftId.value = route.query.giftId.toString()
  } else {
    throw createError({
      statusCode: 404,
      statusMessage: `No Gift ID query parameter at: ${route.fullPath}`,
      fatal: true
    })
  }

  await fetchGiftInformation()
})

async function fetchGiftInformation() {
  try {
    const result = await axios.get<CustomerGiftingResponseInterface>(
      `${config.BASE_URI}/api/${giftId.value}`
    )
    pending.value = false
    data.value = result.data

    // ...do stuff with response here

  } catch (error: any) {
    pending.value = false

       throw createError({
         statusCode: error.value?.response?.status || 404,
         statusMessage: `An error occurred fetching gift information from path: ${route.fullPath}. MORE INFO: ${error.message}`,
         fatal: true
       })
  }
}

Test that cause the error

const mocks = vi.hoisted(() => {
  return {
    createError: vi.fn()
  }
})
const TestComponent = defineComponent({
  components: { Suspense, GiftComponent },
  props: {
    blok: Object
  },
  template: '<Suspense><GiftComponent :blok="blok"/></Suspense>'
})

vi.mock('axios')

vi.mock('#imports', () => {
    return {
      default: { defaultKey: vi.fn() },
      createError:  mocks.createError,
      useRuntimeConfig() {
        return mockRuntimeConfig
      },
      useRoute: mocks.useRoute
    }
  })

axios.get.mockResolvedValue({
    data: getData
  })

it('throws error if there is no giftId query', () => {
    //test passes but throwing VITEST_AFTER_ENV_TEARDOWN error
    mocks.useRoute.mockImplementationOnce(() => {
      return {
        query: { testQuery: 'random' }
      }
    })

    const newWrapper = createFullWrapper(TestComponent, {
      props: {
        blok: {
          qrCodeCopy: 'Test data'
        }
      },
      global: {
        components: {
          FlippingCard
        }
      }
    })
  })

System Info

System:
    OS: macOS 13.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 181.16 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 113.0.5672.92
    Firefox: 105.0.3
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-vue: ^4.1.0 => 4.1.0 
    @vitest/ui: ^0.29.3 => 0.29.8 
    vitest: ^0.31.0 => 0.31.0 

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Did you try updating Vitest first?

[sheremet-va]

This issue was fixed in 0.30.0.

[Katie-Adams]

Well don't I feel like a plonker, thank you for the response. :) Out of curiosity, could you help me find the initial issue that was raised about this? I'm going to look at the changelog now for validation. I feel like I googled everything about this and couldn't find any evidence of it already being fixed in another version so I appreciate the help.

[sheremet-va]

Out of curiosity, could you help me find the initial issue that was raised about this?

It was fixed without an open issue as part of #3103

[Katie-Adams]

Upgrading the version seems to have worked but I'm now seeing a different error message for what appears to be the same issue. As before, commenting out createError removes the warning.
Cannot set properties of undefined (setting 'type')

I've updated my tests to reflect the new version so they now make use of vi.hoisted() too.

[github-actions]

Hello @Katie-Adams. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[sheremet-va]

I have no idea how to run Nuxt components, so I would need a runnable reproduction. In stackblitz or github repo.

[Katie-Adams]

I'll do my best to get one spun up now, thanks

[Katie-Adams]

@sheremet-va
Recreation URL at last. The tests will pass but only when you comment out the createError portion in the HelloWorld.vue component.
https://stackblitz.com/edit/github-bkt1yn?file=components/__test__/HelloWorld.test.js