Ag-grid-vue testing with jest throwing Syntax Error

[somalee-ee]

I am trying to test a basic table with Aggrid using jest. This is throwing the below error:

C:\Users\Somalee.Gupta\Desktop\EnergyExemplarProjects\Data.Web\source\EnergyExemplar.Data.Web\node_modules\@ag-grid-community\vue\lib\AgGridVue.js:20 import { Component, Prop, Vue } from 'vue-property-decorator'; ^^^^^^

SyntaxError: Cannot use import statement outside a module     

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@ag-grid-community/vue/main.js:6:10)

I tried solutions given on this issue: https://github.com/ag-grid/ag-grid/issues/3046 But nothing seems to work. Here are my config files :

Package.json

{ "name": "ee-data-web", "version": "1.0.0", "private": true, "description": "", "author": "Energy Exemplar", "scripts": { "build": "vue-cli-service build --mode development --watch", "lint": "vue-cli-service lint", "build-prod": "vue-cli-service build --mode production", "build-report": "vue-cli-service build --report", "test": "jest --verbose", "tsc": "tsc -project tsconfig.json", "vue-serve": "vue-cli-service serve" }, "main": "site.js", "files": [ "./VueApp/*/.ts" ], "dependencies": { "@ag-grid-community/all-modules": "^24.1.0", "@ag-grid-community/vue": "^24.1.1", "@aspnet/signalr": "1.1.4", "@mdi/font": "^5.5.55", "@vue/test-utils": "^1.0.0-beta.30", "ag-grid-enterprise": "^24.1.0", "axios": "0.19.0", "classy-vuex": "^1.8.7", "clsx": "^1.1.1", "ee.web.components": "0.0.89", "rxjs": "6.5.4", "svgstore": "^3.0.0-2", "vee-validate": "^3.4.5", "vue": "2.6.11", "vue-class-component": "^7.2.3", "vue-inject": "^2.1.1", "vue-loader": "15.7.1", "vue-property-decorator": "^8.4.1", "vue-router": "3.0.6", "vuelidate": "^0.7.5", "vuelidate-property-decorators": "^1.0.28", "vuetify": "2.2.8", "vuex": "3.1.1", "vuex-class": "^0.3.2" }, "devDependencies": { "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "@babel/preset-typescript": "^7.3.3", "@types/jest": "^24.0.19", "@typescript-eslint/eslint-plugin": "^2.20.0", "@typescript-eslint/parser": "^2.20.0", "@vue/babel-preset-jsx": "^1.1.2", "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-plugin-typescript": "^4.3.1", "@vue/cli-plugin-unit-jest": "^4.1.0", "@vue/cli-service": "^3.9.3", "@vue/eslint-config-standard": "^4.0.0", "@vue/eslint-config-typescript": "^5.0.1", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.1.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-jest": "^24.8.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "core-js": "^3.6.5", "eslint": "^6.8.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-import-resolver-typescript": "^2.0.0", "eslint-import-resolver-webpack": "^0.12.1", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jest": "^23.8.0", "eslint-plugin-vue": "^6.2.1", "husky": "^4.2.3", "jest": "^24.9.0", "jest-transform-stub": "^2.0.0", "lint-staged": "^10.0.8", "node-sass": "^4.13.1", "sass": "^1.24.2", "sass-loader": "^7.3.1", "svg-inline-loader": "^0.8.2", "svgo": "^1.1.0", "svgo-loader": "^2.1.0", "ts-jest": "^24.3.0", "typescript": "~3.8.3", "vue-cli-plugin-svg-sprite": "~1.0.0", "vue-cli-plugin-vuetify": "^0.6.3", "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0", "vue-eslint-parser": "^7.0.0", "vue-jest": "^3.0.4", "vue-template-compiler": "2.6.11", "vuetify-loader": "1.3.0", "webpack": "4.37.0", "webpack-cli": "3.3.6" }, "husky": { "hooks": { "pre-commit": "npx lint-staged" } }, "license": "ISC", "lint-staged": { "*.{js,ts,jsx,tsx,vue}": [ "./node_modules/.bin/eslint" ] } }

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

jest.config.json:

module.exports = { moduleFileExtensions: [ 'js', 'jsx', 'json', 'vue', 'ts', 'tsx', ],

collectCoverageFrom: [
    'VueApp/**/*.(vue|ts)',
    '!VueApp/__test__/**',
    '!VueApp/*.(js|ts)',
],

transform: {
    '.*\\.vue$': '<rootDir>/node_modules/vue-jest',
    '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',
    '^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest',
},

transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!vuetify)',
    '<rootDir>/node_modules/(?!(@ag-grid-community)/)',
    '<rootDir>/node_modules/(?!(@ag-grid-vue)/)',
],

moduleNameMapper: {
    '^vue$': 'vue/dist/vue.common.js',
    '@/(.*)$': '<rootDir>/VueApp/$1',
},

testMatch: [
    '**/__test__/(*.)+(spec|test).(js|ts|tsx)',
],

preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',

};

^^^^^^^^^^^^^^^^^^^^^^^^^^^^

babel.config.js

module.exports = { presets: [ ['@babel/preset-env', { corejs: 3, useBuiltIns: 'usage', },

    ],
    ['@babel/preset-typescript', {
        isTSX: true,
        allExtensions: true,
    }],
    '@vue/babel-preset-jsx',
],
env: {
    test: {
        plugins: ['transform-es2015-modules-commonjs'],
    },
},

};

I work for Energy Exemplar and we have an enterprise license for one of our products, though I am experimenting on community version for another of our product.

[somalee-ee]

Hi Please find the repo link below to reproduce the issue:

https://github.com/somalee-ee/AgGridVueDemo/tree/master

The code is in master branch.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[TrayHard]

Open it again please, I don't know did @somalee-ee resolve the problem or not, but i got it as well and have no idea how to fix it. I tried to follow the issue which @somalee-ee mentioned - https://github.com/ag-grid/ag-grid/issues/3046, but nothing from there could help me. We gonna use ag-grid for our work projects in our company and was thinking about buying the license for full product, but because of this error we will have to switch to something like vuetable or anything like that even though I would like to continue work with AgGrid. Help me please.

jest.config.js:

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/'], // I also tried '<rootDir>/node_modules/(?!vee-validate/dist/rules|@ag-grid-community/vue)' from that issue, it doesn't change anything
  collectCoverage: false,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
    '<rootDir>/plugins/**/*.ts',
    '<rootDir>/src/**/*.ts',
  ],
  coveragePathIgnorePatterns: ['<rootDir>/src/server/'],
  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
  modulePathIgnorePatterns: ['.jest-test-results.json'],
}

In my test file i use these lines before "describe" block:

import { mount } from '@vue/test-utils'
import Vue from 'vue'
import { AgGridVue } from 'ag-grid-vue'

Vue.component('AgGridVue', AgGridVue)

So it gives me the same error:

C:\Projects\SEVERSTAL\projects\market-frontend3\node_modules\ag-grid-vue\lib\AgGridVue.js:20
    import { Component, Prop, Vue } from 'vue-property-decorator';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1479:14)
      at Object.<anonymous> (node_modules/ag-grid-vue/main.js:6:10)

Really need help asap, please.

[TrayHard]

Alright I finally solved it, need to add

transformIgnorePatterns: ['<rootDir>/node_modules/(?!ag-grid-vue)'],

to jest.config.js. It means that Jest will not precompile everything in node_modules EXCEPT ag-grid-vue ((?!) helps with it).

[yuanquan8]

我没有这个jest.config.js，但是也报了相同的错误，请问是为什么

[yuanquan8]

I don't have this jest.config.js, but I also reported the same mistake. why

[lincos-sergey]

I had a similar problem in Nuxt (without Jest), when using ssr:true in nuxt.config.js. The workaround was to add a plugin. nuxt.config.js: plugins: [{ src: "~/plugins/ag-grid.js", mode: "client" }],

plugins/ag-grid.js:

import Vue from "vue";
import { AgGridVue } from "ag-grid-vue";

Vue.component("AgGridVue", AgGridVue);

// if you have a license then also add this
import * as agGrid from "ag-grid-enterprise";
agGrid.LicenseManager.setLicenseKey("your_key");

Also, make sure you wrap your AgGridVue in <client-only></client-only> in your .vue files.