0.8.6 version breaks tests

[steklopod]

After upgrading to 0.8.6 ot 0.8.7 some of the tests fail with errors. And test task does not stop

TypeError: The "obj" argument must be an instance of Blob. Received an instance of Blob
    at new NodeError (node:internal/errors:405:5)
    at Function.createObjectURL (node:internal/url:1056:13)

[Vue warn]: Unhandled error during execution of setup function 
  at <Anonymous> 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>

Error: Test timed out in 2000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".

(node:78788) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:78788) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)
(Use `node --trace-warnings ...` to show where the warning was created)
[Vue warn]: Unhandled error during execution of setup function 
  at <Anonymous> 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>
(node:78788) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously (rejection id: 1)
(Use `node --trace-warnings ...` to show where the warning was created)

Error: Test timed out in 2000ms.

---

Here is vitest.config.ts:

import { resolve as pathResolve } from 'node:path'
import { defineVitestConfig } from 'nuxt-vitest/config'
import AutoImport from 'unplugin-auto-import/vite'
import vuetify from 'vite-plugin-vuetify'

export default defineVitestConfig({
  plugins: [
    vuetify(),
    AutoImport({ imports: ['vue'], dirs: ['./composables/'] })
  ],
  resolve: { alias: { '@': pathResolve(__dirname), '~': pathResolve(__dirname) } },
  test: {
    dir: 'tests',
    testTimeout: 2000,
    environment: 'nuxt',
    globals: true,
    deps: { inline: ['vuetify'] },
    setupFiles: ['./tests/setup.ts'],
    coverage: {
      all: true,
      enabled: true,
      reporter: ['text', 'text-summary', 'cobertura'],
      exclude: ['api', '.nuxt', 'server', 'middleware', 'layouts', 'pages', 'tests', '*.config.ts', '*.d.ts', 'app.vue'],
      include: ['**/*.ts', '**/*.vue']
    }
  }
})

This is setup file:

import { Blob } from 'node:buffer'
import { afterEach, beforeAll, vi } from 'vitest'

beforeAll(() => {
  // vuetify hack
  globalThis.Blob = Blob
})

afterEach(() => { vi.clearAllMocks() })

---

Here is an example of failed test:

import { describe, expect, test } from 'vitest'
import { mountSuspended } from 'vitest-environment-nuxt/utils'
import LogoMain from '~/components/main/LogoMain.vue'

describe('🪐 Main logo tests', () => {
  test('Main logo test', async () => {
    const component = await mountSuspended(LogoMain)

    const rootEl = component.find('a')
    expect(rootEl.attributes().href).toBe('/')

    const imgEl = component.find('img')
    const imgAttr = imgEl.attributes()
    expect(imgAttr.src).toContain('/static/img/logo/png/logo_text.png')
    expect(imgAttr.alt).toBeDefined()

    expect(component.html()).toMatchInlineSnapshot(`
     "<a href=\\"/\\"><img src=\\"https://fyi.know/static/img/logo/png/logo_text.png\\" height=\\"28\\" alt=\\"Go to main\\"></a>"
    `)
  })
})

These are failed tests:

2023-07-01.12.15.40.mov

Theese are working tests with version 0.8.5

2023-07-01.12.18.00.mov

[danielroe]

Would you provide a reproduction? 🙏

[steklopod]

Thank you Daniel for quick reaction!

Sure. Here it is:

• https://stackblitz.com/edit/github-e16yng?file=components%2FMapStudioMeta.vue

Just run npm run test

I figured out what causes the error: Mapbox map component

But I don't know how to fix it.

---

Also as zip:
0-8-6_bug_report.zip

[marr]

@steklopod That repro URL isn't correct. It's just pointing to the base starter template. I think you need to save the stackblitz which will fork it and allow us to see the files. Right now we can't see them.

[marr]

@steklopod you're right that the mapbox component seems to break nuxt-vitest. It appears to be running client code on the server. I tried making the component a *.client.vue component, but the issue persists.

I did notice some other issues with the code, and made some fixes here. You may be able to remove the plugins directory that I created but I'm not sure.

vitest-example.tar.gz

[steklopod]

Thank you very much, Marr, for the attempt of help 🙏🏻, but it did not work if uncomment mapbox-component that you commented:

[steklopod]

I am not sure but I think these changes in 0.8.6 version could brake

[danielroe]

Would you provide a runnable reproduction?

[steklopod]

Sure. I just downgraded package.json from 0.8.6 to 0.8.5.

Here is the link with working tests

[steklopod]

The same is for version 0.10.1

Maybe there is a mechanism of ignoring/excluding a tag from rendering in tests?

[danielroe]

It seems to be working fine. I updated nuxt + nuxt-vitest and removed bits from your vitest config that aren't required:

https://stackblitz.com/edit/github-e16yng-ysqzqu?file=package.json,vitest.config.ts,tests/setup.ts

[danielroe]

Or is your point that the blog setup bit is required?

[steklopod]

Thank you Daniel for the help 🙏🏻. I found how to fix this.

The link you provided has not working test:

Step 0

I updated dependencies and simplified vitest.config.ts like in your link and test did not pass:

Step 1

I installed jsdom

Step 2

Added 1 row in vitest.config.ts:

    environmentOptions: { nuxt: { domEnvironment: 'jsdom' } },

This is not covered by doc. I found it inside some other issue of this repo.

Tests passed:

You can check yourself:
https://stackblitz.com/edit/github-e16yng?file=vitest.config.ts

[danielroe]

Oh yes, there was a recent breaking change where you need to install either happy-dom or jsdom. If you install happy-dom you do not need to change the config.

[steklopod]

With happy-dom it does not work. The error is attached in first message of the issue.
Only this row makes tests working:

environmentOptions: { nuxt: { domEnvironment: 'jsdom' } }

[danielroe]

It seems to me that if it works with jsdom but not happy-dom then this is a limitation of happy-dom.

As we've significantly reworked the module, I'm closing this but please do feel to let me know if it's still an issue for you. 🙏