Composition-api: fix: jest test reports error when encountering `useContext`

[yeefun]

🐛 The bug

I use Jest tests, but it seems to report error when it encounters useContext.

I log vm[globalNuxt] at @nuxtjs/composition-api/lib/cjs/entrypoint.js and find it is undefined.

To reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/yeefun/mirror-media-nuxt/
2. Clone this repo by git clone -b chore/bug --single-branch https://github.com/yeefun/mirror-media-nuxt.git
3. yarn install, then yarn test components/__tests__/UIStoryBody.spec.js
4. See error

[bissolli]

Guys, any idea on what might be causing this issue? I am also facing it and could not figure out how to solve that.

[danielroe]

The issue here is that this.$nuxt doesn't exist in your Jest context - you will need to either declare the appropriate properties globally or on a localVue, e.g.:

Vue.prototype.$nuxt = {
  context: {
    // whatever you need to mock/stub
  },
}

[huntz20]

The issue here is that this.$nuxt doesn't exist in your Jest context - you will need to either declare the appropriate properties globally or on a localVue, e.g.:

Vue.prototype.$nuxt = {
  context: {
    // whatever you need to mock/stub
  },
}

@danielroe hei daniel can you please give more information or article to make me more clear about this issue

thanks

[danielroe]

@huntz20 Come join https://discord.nuxtjs.org and join #testing - that's the best place to ask for general advice on how to test things :slightly_smiling_face:

[yeefun]

@huntz20

Example:

XXX.vue

import { useContext } from '@nuxtjs/composition-api'

export default {
  name: 'XXX',
  setup() {
    const { store } = useContext()

    // ...
  },
}

XXX.spec.js

import { shallowMount } from '@vue/test-utils'
import XXX from '../XXX.vue'

test('xxx', () => {
  const wrapper = shallowMount(XXX, {
    mocks: {
      $nuxt: {
        context: {
          store: { /* ... */ },
        },
      },
    },
  })

  // ...
})

I hope this will help.

[hogeihogemi]

@danielroe Hi danielroe

I tried below with reference to https://github.com/nuxt-community/composition-api/issues/248#issuecomment-745811138
(I tried also this method. but same result) https://github.com/nuxt-community/composition-api/issues/248#issuecomment-702303960

but an error has occurred

[Vue warn]: Error in data(): "TypeError: Cannot read property 'params' of undefined"
TypeError: Cannot read property 'params' of undefined

XXX.vue

import { useContext } from '@nuxtjs/composition-api'

export default {
  name: 'XXX',
  setup() {
    const { route} = useContext()
    console.log(route.params) // undefind
    console.log(route.value.params.id)  // TypeError: Cannot read property 'params' of undefined

    // ...
  },
}

XXX.spec.js

import { shallowMount } from '@vue/test-utils'
import XXX from '../XXX.vue'

test('xxx', () => {
  const wrapper = shallowMount(XXX, {
      mocks: {
        $nuxt: {
          context: {
            route: {
              params: {
                id: 1,
              },
            },
          },
        },
      },
    })

  // ...
})

I use verion

    "@nuxtjs/composition-api": "^0.19.1",
    "nuxt": "^2.14.12",
    "@vue/test-utils": "^1.1.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "vue-jest": "^3.0.4"

Is there anything I can fix?

thank you

[danielroe]

route, query, from and params are taken from the $route object rather than the Nuxt context so they need to be mocked differently:

import { shallowMount } from '@vue/test-utils'
import XXX from '../XXX.vue'

test('xxx', () => {
  const wrapper = shallowMount(XXX, {
    mocks: {
      $route: {
        params: {
          id: 1,
        },
      },
    },
  })

  // ...
})