zurg Posts - Answer Overflow

zurg

•Created by zurg on 12/7/2024 in #❓・help

Test Utils: wrapper.find Always Returns Empty DOMWrapper

I'm converting an app for Nuxt 2 to Nuxt 3. I've updated the unit test config to use Nuxt test utils and the Nuxt environment but wrapper.find only ever returns an empty DOMWrapper i.e. does not find anything, even though the wrapper.html looks correct vitest.config.ts

import { defineVitestConfig } from '@nuxt/test-utils/config'
import { configDefaults } from 'vitest/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt',
    globals: true,
    clearMocks: true,
    setupFiles: ['./vitest.setup.ts'],
    globalSetup: ['./vitest.global-setup.ts'],
    exclude: [...configDefaults.exclude, './e2e/**']
  },
  assetsInclude: '**/*.lottie'
})

import { defineVitestConfig } from '@nuxt/test-utils/config'
import { configDefaults } from 'vitest/config'

export default defineVitestConfig({
  test: {
    environment: 'nuxt',
    globals: true,
    clearMocks: true,
    setupFiles: ['./vitest.setup.ts'],
    globalSetup: ['./vitest.global-setup.ts'],
    exclude: [...configDefaults.exclude, './e2e/**']
  },
  assetsInclude: '**/*.lottie'
})

spec file

test('signInWithoutPasswordPage', () => {
  function createWrapper() {
    return mount(signInWithoutPasswordPage)
  }

  it('Renders the form and button', async () => {
    const wrapper = createWrapper()

    const emailOrPhoneField = wrapper.find('[data-testid="identifier"]')

    expect(emailOrPhoneField.isVisible()).toBe(true)
  })

test('signInWithoutPasswordPage', () => {
  function createWrapper() {
    return mount(signInWithoutPasswordPage)
  }

  it('Renders the form and button', async () => {
    const wrapper = createWrapper()

    const emailOrPhoneField = wrapper.find('[data-testid="identifier"]')

    expect(emailOrPhoneField.isVisible()).toBe(true)
  })

Test failure

 FAIL  pages/inventory/auth/sign-in-without-password.spec.ts > signInWithoutPasswordPage > Renders the form and button
Error: Cannot call isVisible on an empty DOMWrapper.
 ❯ Object.get ../node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1574:27
 ❯ pages/inventory/auth/sign-in-without-password.spec.ts:46:30

 FAIL  pages/inventory/auth/sign-in-without-password.spec.ts > signInWithoutPasswordPage > Renders the form and button
Error: Cannot call isVisible on an empty DOMWrapper.
 ❯ Object.get ../node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1574:27
 ❯ pages/inventory/auth/sign-in-without-password.spec.ts:46:30

I've tested with mount and mountSuspended, if I console.log(wrapper.html()) I can see the the element it's search for is in the dom, thanks for any help

12 replies

Gaming

Programming