Nuxt•3w ago

Updating Nuxt and @nuxtjs/composition-api breaks the Jest setup

So I updated Nuxt from 2.15 to 2.18 and @nuxtjs@composition-api from 0.29 to 0.34. But now my Jest setup does not work. I have a global mock for composition api like this:

// __mocks__/@nuxtjs/composition-api.js
const useContext = jest.fn().mockReturnValue({
  error: jest.fn(),
});
const useRoute = jest.fn().mockReturnValue({
  value: {
    query: {},
    path: 'path',
    params: {
      slug: 'slug',
    },
  },
});

const useRouter = jest.fn().mockReturnValue({
  push: jest.fn(),
});

const nextTick = jest.fn();

export {
  useContext,
  useRoute,
  useRouter,
  nextTick,
};
export * from '@nuxtjs/composition-api';

// __mocks__/@nuxtjs/composition-api.js
const useContext = jest.fn().mockReturnValue({
  error: jest.fn(),
});
const useRoute = jest.fn().mockReturnValue({
  value: {
    query: {},
    path: 'path',
    params: {
      slug: 'slug',
    },
  },
});

const useRouter = jest.fn().mockReturnValue({
  push: jest.fn(),
});

const nextTick = jest.fn();

export {
  useContext,
  useRoute,
  useRouter,
  nextTick,
};
export * from '@nuxtjs/composition-api';

But I get an error:

node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { getCurrentInstance as getCurrentInstance$1, ref, customRef, shallowRef, onServerPrefetch, isRef, reactive, toRefs, watch, computed, isReactive, toRaw, onBeforeMount, set } from 'vue';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      23 |   useContext,
      24 |   useRoute,
    > 25 |   useRouter,
         |              ^
      26 |   nextTick,
      27 | };
      28 | export * from '@nuxtjs/composition-api';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (__mocks__/@nuxtjs/composition-api.js:25:14)
      at Object.<anonymous> (test-setup.js:380:25)

node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { getCurrentInstance as getCurrentInstance$1, ref, customRef, shallowRef, onServerPrefetch, isRef, reactive, toRefs, watch, computed, isReactive, toRaw, onBeforeMount, set } from 'vue';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      23 |   useContext,
      24 |   useRoute,
    > 25 |   useRouter,
         |              ^
      26 |   nextTick,
      27 | };
      28 | export * from '@nuxtjs/composition-api';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (__mocks__/@nuxtjs/composition-api.js:25:14)
      at Object.<anonymous> (test-setup.js:380:25)

So it seems the way composition-api is exported has changed. I've read that using Common JS instead of ESM for this mock could work. But how do I do it exactly? Or maybe it is a wrong path to take? Going back to CJS seems wrong to me.

2 Replies

kapa.ai•3w ago

Hi @Gumaa. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering is due to Jest (which runs in a CommonJS environment by default) trying to import an ES module (@nuxtjs/composition-api now ships as ESM). The error message:

SyntaxError: Cannot use import statement outside a module

SyntaxError: Cannot use import statement outside a module

indicates that Jest is attempting to parse ESM syntax in a CJS context, which it doesn't support natively. Why This Happens - Newer versions of @nuxtjs/composition-api use ESM (.mjs) files. - Jest, unless configured otherwise, expects CJS modules and cannot handle ESM imports directly. - Your mock file uses export * from '@nuxtjs/composition-api', which tries to re-export from an ESM module in a CJS file, causing the error. What the Nuxt Docs Say The Nuxt documentation explains that ESM modules (.mjs) are not compatible with CJS environments unless you configure your tooling to support ESM. Node.js and Jest require special configuration to handle ESM, and mixing CJS and ESM can lead to these kinds of issues. The docs recommend using .mjs extensions for ESM and .cjs for CJS, and warn that importing ESM from CJS (or vice versa) can cause errors like the one you see. They also mention that you should avoid using require or CJS-style exports in ESM contexts, and vice versa ES Modules in Nuxt What Kinds of Problems Can There Be?. Solutions #### 1. Remove the export * from '@nuxtjs/composition-api' line This line is the main cause of the error, as it tries to re-export from an ESM module in a CJS file. If you only need to mock a few functions, just export your mocks and don't re-export the whole module. #### 2. Switch Jest to ESM (Advanced, Not Always Recommended) You could try to configure Jest to support ESM, but this is non-trivial and may break other parts of your test setup. The Nuxt docs recommend using ESM throughout, but this requires all your dependencies and tooling to support ESM as well ES Modules in Nuxt. #### 3. Transpile or Alias the Module (Workaround) The Nuxt docs suggest that if you must use a CJS environment, you can transpile ESM dependencies or alias them to a CJS build if available Troubleshooting ESM Issues. #### 4. Use Nuxt Bridge and Nuxt Test Utils (Recommended for Nuxt 2.17+ and Bridge) If you are migrating to Nuxt Bridge or Nuxt 3, consider using the official Nuxt test utilities, which provide helpers for mocking auto-imported composables and components in a way that works with modern Nuxt setups. For example, you can use mockNuxtImport to mock composables like useRoute, useRouter, etc., in your tests:

import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useRoute', () => () => ({
  query: {},
  path: 'path',
  params: { slug: 'slug' }
}))

mockNuxtImport('useRouter', () => () => ({
  push: jest.fn()
}))

mockNuxtImport('useContext', () => () => ({
  error: jest.fn()
}))

import { mockNuxtImport } from '@nuxt/test-utils/runtime'

mockNuxtImport('useRoute', () => () => ({
  query: {},
  path: 'path',
  params: { slug: 'slug' }
}))

mockNuxtImport('useRouter', () => () => ({
  push: jest.fn()
}))

mockNuxtImport('useContext', () => () => ({
  error: jest.fn()
}))

This approach avoids the ESM/CJS interop problem entirely, as it works with Nuxt's auto-import system and is compatible with modern test runners like Vitest mockNuxtImport docs. --- Summary:
The root cause is ESM/CJS incompatibility. The best solution is to avoid re-exporting ESM modules from CJS mocks. Instead, mock only what you need, or use Nuxt's official test utilities if you are on a compatible version. If you need full ESM support in Jest, you'll need to reconfigure your test environment, but this is more complex and not always necessary. If you need more details on configuring Jest for ESM, the knowledge sources do not provide explicit steps for that. For most Nuxt projects, using the Nuxt test utils is the recommended path. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@453886256506601474> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Updating Nuxt and @nuxtjs/composition-api breaks the Jest setup

Did you find this page helpful?