How to use with Nuxt.js

Hello!

I’m trying to use vue-testing-library with Nuxt.js and I’m facing a problem with asyncData not being called.

I’ve been reading for a while, and some people call wrapper.vm.$options.asyncData() manually, but that feels super dirty to me, also I don’t think vm is available in vue-testing-library

Any idea of how can I do it? I ran out of ideas to be honest.

I’ve seen @afontcu post about testing api calls but it uses the created life cycle method

Thank you!

[msmsimondean]

Here’s what I’ve used:

test/nuxtMountUtils.js

import { mount, shallowMount } from '@vue/test-utils'

export async function shallowMountWithFetch(component, options) {
  options.mountFunction = shallowMount
  return await mountWithFetch(component, options)
}

export async function mountWithFetch(
  component,
  { mountFunction, fetchGlobal, fetchMocks, fetchContext, ...options } = {}
) {
  if (!mountFunction) {
    mountFunction = mount
  }
  const wrapper = mountFunction(component, options)
  const fetch = wrapper.vm.$options.fetch
  if (typeof fetch !== 'function') {
    throw new TypeError('fetch should be a function')
  }
  const thisArg = { ...wrapper.vm.$data, ...fetchMocks }
  const originalGlobal = {}
  for (const key of Object.keys(fetchGlobal)) {
    originalGlobal[key] = global[key]
    global[key] = fetchGlobal[key]
  }
  await fetch.apply(thisArg, [fetchContext])
  for (const key of Object.keys(fetchGlobal)) {
    global[key] = originalGlobal[key]
  }
  delete thisArg.$config
  wrapper.setData(thisArg)
  return wrapper
}

Example Usage

import Index from '@/pages/index.vue'
import { mountWithFetch } from '~/test/nuxtMountUtils'

describe('Index', () => {
  const bodyJson = { /* fake response body goes here */ }
  const fetch = jest.fn(() => {
    expect(url).toBe('https://example.com/something')
    return Promise.resolve({
      json: () => Promise.resolve(bodyJson),
    })
  })
  let wrapper
  const createWrapper = async () => {
    wrapper = await mountWithFetch(Component, {
      fetchGlobal: {
        fetch,
      },
    })
  }

[Martin7mind]

i did this and it kind of works… but is there a better solution now?

export const mountWithAsyncData = async (component, options) => {
  let data
  if (component.asyncData) {
    const asyncDataReq = component.asyncData({ app: { $axios: axios } })
    await options.respondToAsyncData()
    data = await asyncDataReq
  }

  return mount(component, {
    data: () => data,
    ...options
  })
}