Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fix: error when running jest

See original GitHub issue

🐛 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:

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';

Run the test
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],
    },
  },
};