Jest: Cannot use import statement outside a module

Hi! I had a problem when I ran tests under Jest with vue-agile. This message

Note that I am in a special case:

I have 2 Vue apps:

• The first one (LamAtomic) under VueJS where I construct an Atomic Design Methodology application (https://atomicdesign.bradfrost.com/chapter-2/), with “atoms” with “AButton”, “ALink”… “molecules” with “MCard”, “MNavbar”… and “MCarousel” with vue-agile!

To run jest, I had to add transformIgnorePatterns: ["/node_modules/(?!vue-agile)"], in jest.config.js as mentioned here: https://github.com/lukaszflorczak/vue-agile/issues/94 ( Thank you very much @JakeBeresford ❤️ )

This application is built as an ESModule (with Rollup) and to use it as a dependency in other VueJS project (as vue-agile).

• The second one (LamaFront) is based on Nuxt where I construct my classic Front-End application (a website), and I add LamAtomic in my package.json as dependency and as Nuxt plugin, so I can use components written in LamAtomic very easily (it’s magic 🤘), especially with the Nuxt “components” module (https://github.com/nuxt/components).

Anyway, so when I run the tests on LamaFront I had a first error AButton not found. So I fixed it by adding setupFiles: ['<rootDir>/plugins/lamatomic.js'], in my jest.config.js.

/plugins/lamatomic.js:

import Vue from 'vue'
import Lamatomic from 'lamatomic'

Vue.use(Lamatomic)

After that I had a new problem:

...lamafront\node_modules\vue-agile\src\index.js:1 
    import VueAgile from './Agile.vue';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 | 
      4 | Vue.use(Lamatomic)
    > 5 | 
        | ^

I looked in all directions and I finally found a workaround here: https://github.com/nrwl/nx/issues/812#issuecomment-429488470

So I add “vue-jest” as “transform” for “index.js” of vue-agile, and my Jest config looks like this:

jest.config.js

const vueModules = ['vue-agile', 'v-calendar'].join('|')

module.exports = {
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/$1',
        '^~/(.*)$': '<rootDir>/$1',
        '^vue$': 'vue/dist/vue.common.js',
    },
    moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
    transform: {
        [`(${vueModules}).+\\.js$`]: 'vue-jest',
        '^.+\\.ts$': 'ts-jest',
        '^.+\\.js$': 'babel-jest',
        '.*\\.vue$': 'vue-jest',
    },
    transformIgnorePatterns: [`/node_modules/(?!${vueModules})`],
    collectCoverage: true,
    collectCoverageFrom: [
        '<rootDir>/components/**/*.vue',
        '<rootDir>/pages/**/*.vue',
    ],
    testMatch: [
        '**/__tests__/**/*+(spec|test).[jt]s?(x)',
        '**/?(*.)+(spec|test).[jt]s?(x)',
    ],
    setupFiles: ['<rootDir>/plugins/lamatomic.js'],
}

But I’m not fan to have to add configuration depends a dependency…

Do you have a cleaner solution?

For example, I looked into another dependency: Vue Typed JS (https://github.com/Orlandster/vue-typed-js) without this problem, and we can see an interesting difference (I think) in package.json:

https://github.com/Orlandster/vue-typed-js/blob/master/package.json

...
"main": "dist/vue-typed-js.common.js",
...

In vue-agile:

...
"main": "src/index.js",
...

Maybe we should build vue-agile as an ESModule ?

(Sorry if my solution is ridiculous :x)

[BhaveshSalunke]

I’m facing the same issue. Any update?

[KillianLeroux]

My problem is already here 😕