Jest 在解析 node_modules 中的 json 文件时不断抛出错误

Question

我一直在尝试配置我的 jest.config.js 文件以在我用 TypeScript 编写的 Vuejs 应用程序上运行一些测试。 Jest 在解析 node_modules 中的 json 文件时不断给出一个错误，说它遇到了意外的令牌。不确定是什么问题，因为当我尝试导入纯 javascript 的 vue 文件时，它运行良好。下面是开玩笑抛出的错误

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 774
        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:453:35)

这是我的 jest.config.js 文件

module.exports = {
  preset: 'ts-jest',
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',
    '.+\\.json': '<rootDir>/node_modules/json5-jest',
    '^.+\\.json5$': 'json5-jest',
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'js', 'json', 'node', 'jsx', 'tsx', 'vue'],
  moduleDirectories: ['node_modules', 'src'],
  testMatch: [
    '**/__tests__/**/*.+(ts|tsx|js)',
    '**/?(*.)+(spec|test).+(ts|tsx|js)',
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/',
    '<rootDir>/node_modules/(?!(@jest)/)',
    '<rootDir>/node_modules/(?!(@vue-jest)/.*)',
    '<rootDir>/node_modules/(?!tsconfig/.*)',
    '<rootDir>/node_modules/(?!vue-jest/.*)',
    '<rootDir>/node_modules/(?!@jest/.*)',
  ],
  testURL: 'http://localhost/',
}

这里也是我尝试导入的 vue 文件之一：

<template>
  <tr>
    <td class="link">{{ originalUrl }}</td>
    <td class="link">{{ shortUrl }}
      <button class="copy-clipboard" @click="handleCopyClipboard">Copy</button>
    </td>
    <td>
      <button class="delete-one" @click="handleDeleteUrl">Delete</button>
    </td>
  </tr>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend ({
  props: {
    shortUrl: {
      type: String,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    originalUrl: {
      type: String,
      required: true
    },
    shortUrlHash: {
      type: String,
      required: true
    },
    handleDelete: {
      type: Function,
      required: true
    }
  },
  name: 'Url' as string,
  data: () => ({}),
  methods: {
    handleDeleteUrl() : void {
      this.handleDelete(this.id)
    },

    handleCopyClipboard() : void {
      navigator.clipboard.writeText(this.shortUrl)
      alert('copied to clipboard')
    }
  }
})
</script>

<style scoped>
  .copy-clipboard {
    display: inline-block;
    background: green;
    color: white;
    height: 32px;
    margin-left: 10px;
    width: 60px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    border: 0;
    box-shadow: none;
    cursor: pointer;
  }

  .delete-one {
    height: 32px;
    background: #dc3545;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    border: 0;
    box-shadow: none;
    text-align: center;
    cursor: pointer;
  }

  button:hover {
    background: #556476;
  }

  .link {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
  }

  @media only screen and (max-width: 540px) {
    .copy-clipboard {
      display: none;
    }

    .delete-one {
      display: none;
    }
  }
</style>

Answer 1

错误调用堆栈意味着在转换<script lang="ts">块时解析TypeScript配置时在Vue加载器中发生这种情况。

这很可能是 .json 文件中的真正语法错误。不幸的是，没有提到文件位置，这需要调试。由于这发生在 TypeScript 初始化时，问题出在 tsconfig.json 或相关文件中。

.json 不需要单独的json5-jest 转换器，它可以由 TypeScript 和 Babel 处理，并且提供带有 .json 扩展名的 JSON5 将是一个错误，会导致这样的问题。