Can't resolve path to tsconfig when using tsConfig

[Loremaster]

Hello!

I upgraded vue-jest from 2.6.0 to 3.0.2 and it started to show deprecation message:

[vue-jest]: Deprecation Warning:

[vue-jest]: Option "tsConfigFile" has been removed, and replaced by "tsConfig"

[vue-jest]: This option will be removed in the next major version of `vue-jest`. Please update your configuration.

so I replaced tsConfigFile with tsConfig but it doesn't seem to resolve path properly now for some reasons:

 FAIL  app/javascript/compose_email/components/Emails/PersonalText/__tests__/Panel.spec.ts
  ● Test suite failed to run

    Cannot find module 'tsconfig.jest.json'

      at loadTypescriptConfig (node_modules/vue-jest/lib/load-typescript-config.js:53:30)
      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)

Can you give an advice how that can be fixed?

package.json

{
  "engines": {
    "node": "11.6.0",
    "npm": "5.6.0",
    "yarn": "1.12.3"
  },
  "dependencies": {
    "@rails/webpacker": "^3.5.5",
    "@types/ckeditor": "^4.9.5",
    "@types/jquery": "^3.3.29",
    "@types/lodash": "^4.14.119",
    "@types/node": "^10.12.18",
    "@types/pusher-js": "^4.2.0",
    "axios": "^0.18.0",
    "babel-loader": "^7.1.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-vue": "^2.0.2",
    "bootstrap-vue": "^2.0.0-rc.11",
    "coffeelint": "^2.1.0",
    "epic-spinners": "^1.0.4",
    "es6-promise": "^4.2.5",
    "immutable": "^4.0.0-rc.12",
    "jquery": "^3.3.1",
    "lodash": "^4.17.11",
    "nodelist-foreach-polyfill": "^1.2.0",
    "pusher-js": "^4.3.1",
    "qs": "^6.6.0",
    "rosie": "^2.0.1",
    "ts-loader": "3.5.0",
    "typescript": "^3.2.2",
    "vee-validate": "^2.1.5",
    "vue": "^2.5.22",
    "vue-class-component": "^6.3.2",
    "vue-loader": "14.2.3",
    "vue-notification": "^1.3.14",
    "vue-property-decorator": "^7.3.0",
    "vue-template-compiler": "^2.5.22",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.12",
    "@vue/test-utils": "^1.0.0-beta.28",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.12.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^3.5.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jest": "^22.1.3",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-vue": "^5.1.0",
    "flush-promises": "^1.0.2",
    "identity-obj-proxy": "^3.0.0",
    "ignore-loader": "^0.1.2",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "lint-staged": "^8.1.0",
    "moxios": "^0.4.0",
    "pre-commit": "^1.2.2",
    "prettier": "^1.15.3",
    "stylelint": "^9.10.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.5.1",
    "ts-jest": "^23.10.5",
    "tslint": "^5.12.1",
    "tslint-loader": "^3.6.0",
    "vue-jest": "^3.0.2",
    "webpack-dev-server": "^2.11.3"
  },
  "scripts": {
    "test": "jest",
    "lint-staged": "$(yarn bin)/lint-staged"
  },
  "lint-staged": {
    "app/javascript/**/*.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "app/javascript/**/*.ts": [
      "prettier --write",
      "tslint --fix",
      "git add"
    ],
    "app/javascript/**/*.vue": [
      "prettier --write",
      "stylelint --fix",
      "tslint --fix",
      "git add"
    ],
    "app/javascript/**/*.spec.js": [
      "prettier --write",
      "eslint",
      "git add"
    ],
    "app/javascript/**/*.spec.ts": [
      "prettier --write",
      "tslint",
      "git add"
    ],
    "app/assets/stylesheets/**/*": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/stylesheets/**/*.scss": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/javascript/**/*.scss": [
      "prettier --write",
      "stylelint --fix",
      "git add"
    ],
    "app/javascript/**/*.json": [
      "prettier --write",
      "git add"
    ]
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "<rootDir>/app/javascript/.setup.ts"
    ],
    "moduleDirectories": [
      "node_modules",
      "<rootDir>/app/javascript",
      "<rootDir>/spec/javascript"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "/__tests__/.*\\.(ts|tsx|js)$",
    "transformIgnorePatterns": [
      "node_modules/(?!bootstrap-vue|epic-spinners)"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/app/assets",
      "<rootDir>/config/webpack/test.js",
      "<rootDir>/vendor"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/app/javascript/$1",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "restoreMocks": true,
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json",
        "babelConfig": true,
        "diagnostics": false
      },
      "vue-jest": {
        "tsConfig": "tsconfig.jest.json"
      }
    }
  },
  "pre-commit": [
    "lint-staged"
  ]
}

tsconfig.json

  "compilerOptions": {
    "baseUrl": "./app/javascript",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom", "es2015.promise", "es2017"],
    "moduleResolution": "node",
    "module": "es2015",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "target": "es5",
    "allowJs": true,
    "downlevelIteration": true
  },
  "exclude": ["**/*.spec.ts", "node_modules", "vendor", "public", "**/__mocks__/index.ts"],
  "compileOnSave": false

tsconfig.jest.json

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true
  }
}

[eddyerburgh]

Can you please provide a runnable reproduction as a GitHub repository

[janesser]

i had to add absolute path in order to make it work:
'vue-jest': { diagnostics: true, babelConfig: false, // https://github.com/vuejs/vue-jest/issues/148 tsConfig: '/home/jesser/projs/ecom/checkout-ui/tsconfig.test.json', }

This is from jest.config.json in the checkout-ui folder mentioned above.

I quickly checked how ts-jest is doing, which seems also to be a good algorithm for vue-jest.

[janesser]

@eddyerburgh i have seen linked PR, which looks promising. It's for 4.x.x., right?

When is v4.0.0-beta.2 to become GA?

Is some retrofit to the 3.x.x line planned?

[Loremaster]

@janesser thank you for the hint with absolute path. I found a better workaround for now using path.resolve

jest.config.js

const { resolve } = require("path");

module.exports = {
 // ...
  globals: {
    // ...
    "vue-jest": {
      tsConfig: resolve("tsconfig.jest.json"),
    },
  },
};

[eddyerburgh]

@janesser I haven't planned to add the fix to v3, but I'll accept a PR that adds the fix.

[janesser]

@eddyerburgh PR set up. Comments welcome.

[eddyerburgh]

The fix is released in v3.0.4, thanks @janesser !