V4.0.0-beta.0: extends in tsconfig.json does not work as expected.

[yohodopo]

tsConfig.json

{
  "extends": "./.temp/tsconfig-base.json"
}

tsconfig-base.json

{
  "include": ["../src/**/*", "../types/**/*.d.ts", "./loader-types.d.ts", "./client-types.d.ts"],
  "exclude": ["../src/**/*.spec.ts", "../src/**/*.spec.js"],
  "compilerOptions": {
    "strict": true,
    "skipLibCheck": true,
    "module": "esnext",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "lib": ["dom", "es6", "dom.iterable", "scripthost"],
    "noEmitHelpers": true,
    "importHelpers": true,
    "inlineSources": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": ".",
    "paths": {
      "~ngAppModule": ["./ng-app-module"]
    },
    "outDir": "../dist/",
    "rootDir": "../src"
  }
}

When I tried debugging this issue, it logs {"extends":"./.temp/tsconfig-base.json","compilerOptions":{}} at https://github.com/vuejs/vue-jest/blob/master/lib/compilers/typescript-compiler.js#L11

related to #118

[ibuchan72390]

I can confirm this issue as well. I have been attempting to implement testing in Nuxt leveraging Jest. The default recommended config for nuxt-ts is:

{
  "extends": "./node_modules/nuxt-ts/tsconfig.nuxt-ts.json"
}

Eventually I chased it down to a failure to load the extended attributes into the referenced object as previously mentioned by @yohodopo

[FeliciousX]

can confirm this is happening aswell :(

i was trying to debug why my typescript decorator is having it's 3rd argument as undefined in the test but has value in app code.

NOTE The Property Descriptor will be undefined if your script target is less than ES5.

I assumed it was in vue-jest because it was trying to test a .vue file with lang="ts"

I tried tweaking the tsConfig option for vue-jest and finally managed to reproduce it if i didn't extend my config.. which is where my target option lies

[IlCallo]

From what I read, vue-jest v3 uses a very old package to resolve tsconfig.json, needed before TypeScript exposed config resolution features. This package doesn't support configuration inheritance. A PR has been started, but never finished and merged.

I found this bug while making Quasar framework work nicely with TS and Jest, in which a esModuleInterop property from a preset configuration wasn't being picked up in the extending configuration, while everything worked fine when adding the property directly on the former.

Anyway, seems like the new V4 will support ts-jest which should manage inheritance correctly (it used native TS configuration management), so I guess the problem will be solved in some time.

Cya!

[vegerot]

I am using "@vue/cli-service": "4.5.8", and still experience this issue.

To test I:

1. Made a valid tsconfig.json (without extends), ran my test suite, and they passed
2. moved tsconfig.json to tsconfig.base.json and created tsconfig.json with contents:

{
  "extends": "./tsconfig.base.json"
}

3. Ran tests again, and they fail

[mdo2]

I am using "@vue/cli-service": "4.5.8", and still experience this issue.

To test I:

1. Made a valid tsconfig.json (without extends), ran my test suite, and they passed
2. moved tsconfig.json to tsconfig.base.json and created tsconfig.json with contents:

{
  "extends": "./tsconfig.base.json"
}

1. Ran tests again, and they fail

Same here!

Please, provide some feedback

[mjeanroy]

Hi,

I encoutered the same issue, and I wrote this workaround in my jest.config.js:

const path = require('path');
const tsc = require('typescript');

module.exports = {
  globals: {
    'vue-jest': {
      tsConfig: extractTsConfig(),
    },
  },
};

function extractTsConfig() {
  const tsConfigPath = tsc.findConfigFile(process.cwd(), (fileName) => tsc.sys.fileExists(fileName));
  if (!tsConfigPath) {
      return;
  }

  const loaded = tsc.readConfigFile(tsConfigPath, (file) => tsc.sys.readFile(file));
  if (loaded.error) {
      throw new Error(loaded.error);
  }

  const basePath = path.dirname(tsConfigPath);
  const parsedConfig = tsc.parseJsonConfigFileContent(loaded.config, tsc.sys, basePath);
  if (parsedConfig.errors.length > 0) {
      throw new Error(`Errors occurred while reading ${tsConfigPath}: ${parsedConfig.errors}`);
  }

  return {
    compilerOptions: parsedConfig.options,
  };
}

I would be happy to open a PR with a more general fix if it interests someone.

[vegerot]

@mjeanroy I am interested

[mjeanroy]

Hi @lmiller1990, Would you be interested in a PR to fix this issue? Or is there any plan in a next release, so a fix like this would be useless?

[lmiller1990]

Yes this would be welcome, I can do a release if we have a fix!

[mjeanroy]

Hi @lmiller1990,

I just look at the code on the master branch and it looks like this issue is fixed with version 4.0.0 (not tested, but, as already said by @IlCallo, since it uses ts-jest to resolve ts config, it should be fixed).

The main problem is that version ^3.0.7 is the version currently shipped with latest @vue/cli-plugin-unit-jest, so it may be an issue for some users until a new major version of @vue/cli-plugin-unit-jest is released.

Are you still interested in a fix for the vue-jest@^3.0.7 branch or do you prefer to wait for a new major version of vue-cli?

[lmiller1990]

3.x has not been updated in a long time. Even if you fix it, updating vue-cli would need to happen as well.

I don't think it makes sense to update 3.x at this point. People should just upgrade to 4.x. If you like, you could open an issue in vue-cli to update the plugin to 4.x. I don't think this is a major breaking change so it shouldn't be too much trouble.

Also I think we need to review/merge this up? https://github.com/vuejs/vue-jest/pull/324