Composition-api: fix: error when running jest

[samnap11]

🐛 The bug
I created a jest unit test. Inside that particular file, I imported a Vue component. This Vue component is built with @nuxtjs/composition-api. However, when I ran the test, I encountered an error saying that the @nuxtjs/composition-api hasn't been added to the buildModules in nuxt.config.js yet. However, I had added it. I could serve it properly on the browser.

🛠️ To reproduce
Steps to reproduce the behavior:

1. Create a TypeScript unit test file with Jest and import a component built with @nuxtjs/composition-api

// Navbar.spec.ts
import { describe, expect, test } from '@jest/globals';
import { mount } from '@vue/test-utils';
import Navbar from '../components/Navbar.vue';

1. Run the test
2. See the error

yarn run v1.22.10
$ jest
 FAIL  test/Navbar.spec.ts
  ● Test suite failed to run

    You need to add `@nuxtjs/composition-api` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.



      at warnToAddModule (node_modules/@nuxtjs/composition-api/lib/index.js:113:9)
      at components/Navbar.vue:1153:65
      at Object.<anonymous> (components/Navbar.vue:1237:3)
      at Object.<anonymous> (test/Navbar.spec.ts:3:1)

  console.error
    You need to add `@nuxtjs/composition-api` to your buildModules in order to use it. See https://composition-api.nuxtjs.org/getting-started/setup.



      at warnToAddModule (node_modules/@nuxtjs/composition-api/lib/index.js:112:11)
      at components/Navbar.vue:1153:65
      at Object.<anonymous> (components/Navbar.vue:1237:3)

ℹ️ Additional context
Add any other context about the problem here.
This my nuxt.config.js file

// nuxt.config.js
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Title',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'website',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'nuxt-lazy-load',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},

  googleFonts: {
    display: 'swap',
    prefetch: true,
    preconnect: true,
    preload: true,
    families: {
      Roboto: [400, 500],
      Lato: [400, 700],
      Lora: [700],
    },
  },
};

[danielroe]

@samnap11 Did you follow these instructions? https://composition-api.nuxtjs.org/getting-started/setup#testing-with-jest

[samnap11]

Oh wow. I completely missed that on the docs. Big apologies. Thank you so much for responding.

[danielroe]

Great! Glad that's solved :grin:

[tommycoppers]

@samnap11 Did you follow these instructions? https://composition-api.nuxtjs.org/getting-started/setup#testing-with-jest

Quick sanity check for anyone watching, I'm not finding the link referenced here above. Did the documentation change? I'm having an issue where tests are running, but the setup function is not executing

[samnap11]

@samnap11 Did you follow these instructions? https://composition-api.nuxtjs.org/getting-started/setup#testing-with-jest

Quick sanity check for anyone watching, I'm not finding the link referenced here above. Did the documentation change? I'm having an issue where tests are running, but the setup function is not executing

They have removed it because there's no need to do this any longer. This has been fixed in release v0.23.0.

[tommycoppers]

Thanks for the reply @samnap11 ! That's what I thought, too. Seems like something happened though. I upgraded, removed the moduleNameMapper, and now all the tests aren't executing the setup() method when the component is mounted. I opened an issue here: https://github.com/nuxt-community/composition-api/issues/468