Testing Nuxt v2.15.8 has undefined context

[rjdmacedo]

Context

I am using Nuxt 2.15.8 and I am creating a POC with Pinia to convert some composables to stores.
To do that, stores must be tested at the same extend as the composables are at this point (in my project).
I'm testing the store itself, useCartStore, to guarantee that its functionality is correct and we are using context this.$nuxt and that's working great so far.

The issue is that, when testing, the this.$nuxt is undefined. I am using the context to make some API calls and I want to mock the responses.

TL;DR

How can we mock the context in a pinia store?

// from the docs, https://pinia.vuejs.org/ssr/nuxt.html#using-the-nuxt-context-in-stores

defineStore('cart', {
  actions: {
    purchase() {
      const user = useUserStore()
      if (!user.isAuthenticated()) {
        this.$nuxt.redirect('/login') <- here we are using $nuxt context to redirect
      }
    },
  },
})

[sethidden]

This is the same issue as (considering Nuxt2 with composition-api plugin): nuxt-community/composition-api#248 (comment)

You can either do it globally in jest-setup.ts: (make sure to set up jest's setupFiles/setupFilesAfterEnv with this file)

import '@testing-library/jest-dom';
import Vue from 'vue';
import { config } from '@vue/test-utils';

config.stubs = {
  NuxtImg: { render(h) { return h('img'); } },
};

const $vsf = {
  $magento: {
    config: {
      imageProvider: '',
      magentoBaseUrl: '',
      state: {},
    },
  },
};

// mocks object returned by useContext()
Vue.prototype.$nuxt = {
  context: {
    $vsf,
    app: {
      // $vsf intentionally doubled in context top level AND in context.app - this is the way it's in the app
      $vsf,
      $fc: jest.fn((label) => label),
      localePath: jest.fn((link) => link),
    },
    i18n: {
      t: jest.fn((label) => label),
    },
  },
};

This is from https://github.com/vuestorefront/magento2/pull/910/files#diff-cf7e6e196f212793d1e4a0afa082d7169a523492826830ff03088e07b68ac487 - though I can't guarantee this won't change as I'm still working on it :P

or in the localVue as part of a single spec.ts files

//mytest.spec.js

const localVue = createLocalVue();

localVue.prototype.$nuxt = {
  
}

it('', () => {
  shallowMount(Component, { localVue })
})