CODEWITHSUNDEEP
typescriptvue.jstestingjestjsnuxt.js
eRobot
eRobot

Reputation: 117

Jest encountered an unexpected token for NUXT typescript

have been searching for two days, tried many answers, but couldn't find a solution. any clue? below are my config files. please any help? 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',
    },
    collectCoverage: true,
    collectCoverageFrom: [
        '<rootDir>/components/**/*.vue',
        '<rootDir>/pages/**/*.vue',
    ],
};

.babelrc

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

package.json

{
    "name": "myApp",
    "version": "1.0.0",
    "private": true,
    "jest": {
        "verbose": true
    },
    "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "generate": "nuxt generate",
        "start": "nuxt start",
        "lint": "npm run lint:js && npm run lint:style",
        "lint:fix": "npm run lint:js-fix && npm run lint:style-fix",
        "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
        "lint:js-fix": "npm run lint:js -- --fix",
        "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
        "lint:style-fix": "npm run lint:style -- --fix",
        "test": "jest"
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.13.1",
        "@types/jest": "^26.0.23",
        "core-js": "^3.14.0",
        "nuxt": "^2.15.3",
        "nuxt-property-decorator": "^2.9.1"
    },
    "devDependencies": {
        "@babel/plugin-transform-modules-commonjs": "^7.14.5",
        "@commitlint/cli": "^12.0.1",
        "@commitlint/config-conventional": "^12.0.1",
        "@nuxt/types": "^2.15.3",
        "@nuxt/typescript-build": "^2.1.0",
        "@nuxtjs/eslint-config-typescript": "^6.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "@nuxtjs/stylelint-module": "^4.0.0",
        "@nuxtjs/vuetify": "^1.11.3",
        "@vue/test-utils": "^1.1.3",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^27.0.2",
        "eslint": "^7.22.0",
        "eslint-config-prettier": "^8.1.0",
        "eslint-plugin-nuxt": "^2.0.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "^7.7.0",
        "jest": "^26.6.3",
        "prettier": "^2.3.1",
        "sass": "~1.32.13",
        "standard-version": "^9.3.0",
        "stylelint": "^13.12.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-sass-guidelines": "^8.0.0",
        "stylelint-config-standard": "^22.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-scss": "^3.19.0",
        "ts-jest": "^26.5.4",
        "vue-jest": "^3.0.4"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "ESNext",
        "moduleResolution": "Node",
        "lib": [
            "ESNext",
            "ESNext.AsyncIterable",
            "DOM"
        ],
        "esModuleInterop": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "noEmit": true,
        "experimentalDecorators": true,
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "./*"
            ],
            "@/*": [
                "./*"
            ]
        },
        "types": [
            "@nuxt/types",
            "@nuxtjs/axios",
            "@types/node"
        ]
    },
    "exclude": [
        "*.config.js",
        "dist",
        "node_modules",
        ".nuxt",
    ]
}

error message Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/en/configuration.html Details:

 SyntaxError: Unexpected token ] in JSON at position 804
        at JSON.parse (<anonymous>)

  at parse (node_modules/tsconfig/src/tsconfig.ts:195:15)
  at readFileSync (node_modules/tsconfig/src/tsconfig.ts:181:10)
  at Object.loadSync (node_modules/tsconfig/src/tsconfig.ts:151:18)
  at find (node_modules/vue-jest/lib/load-typescript-config.js:33:39)
  at loadTypescriptConfig (node_modules/vue-jest/lib/load-typescript-config.js:73:26)
  at compileTypescript (node_modules/vue-jest/lib/compilers/typescript-compiler.js:9:20)
  at processScript (node_modules/vue-jest/lib/process.js:23:12)
  at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:42:18)
  at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)

Upvotes: 1

Views: 1770

Answers (1)

eRobot
eRobot

Reputation: 117

after days and days research and debug, finally I resolved this issue by myself. referred to this blog https://www.damirscorner.com/blog/posts/20200717-TestingJsxComponentsWithJestInNuxjsS.html

1. I added babel.config.js

module.exports = {
    env: {
        test: {
            presets: [
                ['@vue/cli-plugin-babel/preset'],
                [
                    '@babel/preset-env',
                    {
                        targets: {
                            node: 'current',
                        },
                    },
                ],
            ],
        },
    },
};

2. changed "exclude" from tsconfig.json value to (only order difference)

 "exclude": [
        "*.config.js","node_modules", ".nuxt", "dist"]
    }

3. downgrade typescript to "3.8.3", and babel-jest to "^26.0.0", (the supported versions will be showing from the error messages)

Upvotes: 1

Related Questions