Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit test for page components fail when layout is used #293

Open
fago opened this issue Jan 14, 2025 · 1 comment
Open

Unit test for page components fail when layout is used #293

fago opened this issue Jan 14, 2025 · 1 comment

Comments

@fago
Copy link
Contributor

fago commented Jan 14, 2025

A unit test like this fails

import { describe, it, expect } from 'vitest'
import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
import App from '~/app.vue'

describe('Testing routes', () => {
  registerEndpoint('/api/drupal-ce/prenode', () => ({
    content: {
      element: 'drupal-markup',
      body: '<p>Some <b>example</b> body.</p>'
    },
    local_tasks: {},
    messages: [],
    metatags: { meta: [], link: [], jsonld: [] }
  }))

  registerEndpoint('/api/menu/api/menu_items/main', () => ([
    { title: 'Test page', relative: '/node/1' }
  ]))

  it('renders preview/node with direct backend request, skipping drupal-ce-proxy', async () => {
    const component = await mountSuspended(App, {
      route: '/prenode'
    })
    expect(component.html()).toContain('<p>Some <b>example</b> body.</p>')
  })

})

when the default [...[.vue is used with some layout like

<template>
  <div>
    <NuxtLayout name="default">
      <main>
        <component :is="renderCustomElements(page.content)" />
      </main>
    </NuxtLayout>
  </div>
</template>

<script lang="ts" setup>
const { fetchPage, renderCustomElements } = useDrupalCe()
const page = await fetchPage(useRoute().path, { query: useRoute().query })

</script>

When the NuxtLayout component is removed, it works. Also when the component WITH the NuxtLayout is copied to prenode.vue page component, such that the fallback is not used, then it works also! It seems the mocking of routes of nuxt test utils somehow fails when the fallback component is in use.

@fago
Copy link
Contributor Author

fago commented Jan 14, 2025

It also works when a page component like testing/[...].vue is used. But it fails with the regular [...].vue. As a work-a-round I've added testing/[...].vue in the playground so we can use this for unit tests until this is fixed.

@fago fago changed the title Unit test for fallback components fail when layout is used Unit test for page components fail when layout is used Jan 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant