nuxt-tsでのjest使用時に発生するエラーについて

Question

現在nuxt-ts下でjest+ts-jest+vue-jest+@vue/test-utilsを使用したunitテスト環境を構築しています。
セットアップ方法はVue Test Utils公式サイトを参考に行っていました。
Vue Test Utils->TypeScript と一緒に使う

上記ページを参考に必要なものをインストールし、jest.config.jsとtsconfig.jsonを編集後、テストコードを用意しjestのテストを実行したところ、以下のエラーが表示されテストが失敗してしまいます。

 FAIL  test/HelloWorld.spec.ts
  ● 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:
     • 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 504
        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:32:39)
      at loadTypescriptConfig (node_modules/vue-jest/lib/load-typescript-config.js:71: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)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        8.494s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

自身でも色々試行錯誤をし、また公式や類似エラーが出ているissueも確認しトライしてみましたが、同一エラーが表示されました。

こちら何が原因なのでしょうか？
またどのようにすればnuxt-ts下でjestのテストを行えるようになるでしょうか？
自身では原因が掴めず、長時間ハマってしまっているので、知見がある方いらっしゃいましたら、解決方法をご教授頂けると大変助かります。

以下に環境情報や、jest.config.jsなどのコードを記載しておきますので、こちら確認の上ご返答頂けると助かります。

環境情報

• Node.js => 10.15.1
• yarn => 1.9.2
• @types/jest => ^24.0.4
• jest => ^23.6.0
• ts-jest => ^23.10.5
• vue-jest => ^3.0.2

各コード

jest.config.js

module.exports = {
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json'
    }
  },
  cache: false,
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'],
  transform: {
    '.*\.(vue)$': 'vue-jest',
    '^.+\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  transformIgnorePatterns: ['<rootDir>/node_modules//(?!(vue-jest|ts-jest)/)'],
  testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$',
  testURL: 'http://localhost/'
}

tsconfig.json

{
  "extends": "@nuxt/typescript",
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "allowJs": true,
    "types": [
      "@types/node",
      "@types/jest",
      "@nuxt/vue-app"
    ],
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"],
    },
  },
}

Answer 1

同じエラーメッセージが出て調べているうちに辿り着きました。
自分の場合は、プロジェクトのtsconfig.jsonの修正で直りました。
どうも、厳密なJSON（不要な末尾カンマを認めない）にする必要があるようです。
ご参考になれば。

{
  "extends": "@nuxt/typescript",
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "allowJs": true,
    "types": [
      "@types/node",
      "@types/jest",
      "@nuxt/vue-app"
    ],
    "paths": {
      "@/*": ["./*"],
      "~/*": ["./*"], // <== 末尾の,を削除
    }, // <== 末尾の,を削除
  }, // <== 末尾の,を削除
}

Answer 2

transformIgnorePatterns で node_modules/tsconfig/src/tsconfig.ts なども除外されて ts-jest でパースしてくれなくなってるんじゃないでしょうか。
私の環境では質問者様のjest.config.jsからglobalsとtransformIgnorePatternsをなくした状態とほぼ同じ構成でテストの実行に成功してます。

Comments

[__sn]

前述の`jest.config.js`を以下の状態にするということでしょうか？

```js
module.exports = {
cache: false,
moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'],
transform: {
'.*\.(vue)$': 'vue-jest',
'^.+\.tsx?$': 'ts-jest',
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js'
},
testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$',
testURL: 'http://localhost/'
}
```

こちらに変更しテスト実行してみましたが、上記と同内容のエラーが表示され、テスト実行できませんでした。

[yhg]

調べてみたら、transformIgnorePatterns を指定しないデフォルトの状態でも node_modules 以下のディレクトリは変換が入らないようになっているようでした。
どこから tsconfig.ts が呼ばれているのか分かりませんが、node_modules/tsconfig を transformIgnorePatterns に加える必要があるのかも。

transformIgnorePatterns: ['<rootDir>/node_modules//(?!(tsconfig|vue-jest|ts-jest)/)'],

[__sn]

お伝え頂いたtransformIgnorePatternsをjest.config.jsに記載してみましたが、jestのテストは失敗し、エラーメッセージも依然同内容のものが表示されました。