NuxtN
Nuxt•6mo ago•
9 replies
tlafarge

Fixture typing

Hi guys,

I am implementing E2E tests in my Nuxt app and I would like to use the Page Object Model (POM) and fixtures patterns.

In my POM, I have this code :
import type { NuxtPage } from '@nuxt/test-utils'

export class ListArticlesPage {

  readonly page: NuxtPage

  constructor(page: NuxtPage) {
    this.page = page
  }

  async goto() {
    await this.page.goto('/annonces/creer', { waitUntil: 'hydration' })
  }

}

Note how I have imported NuxtPage from @nuxt/test-utils so I can pass 'hydration' as an option to goto.

Now in my fixtures, I have this code:
import type { NuxtPage } from '@nuxt/test-utils'
import { test as base } from '@nuxt/test-utils/playwright'

interface ListArticlesFixtures {
  listArticles: ListArticlesPage
}

export const test = base.extend<ListArticlesFixtures>({
  listArticles: async ({ page }, use) => {
    const listArticlesPage = new ListArticlesPage(page as NuxtPage)
    await use(listArticlesPage)
  },
})


Here I have to cast 
page
 to NuxtPage or else, typescript will complain.

Is it the expected way to do it ? Or is there a better way to handle this ?
Was this page helpful?