Jest 测试中出现意外字符“@”答案

【问题标题】：Unexpected character '@' on Jest TestsJest 测试中出现意外字符“@”
【发布时间】：2021-08-19 18:12:49
【问题描述】：

目前在使用 NuxtJS Jest 测试时遇到一些问题，我想尝试构建 Nuxt 应用程序来测试 URL，因为我的一些组件说找不到路由名称。所以我尝试了这个：

beforeAll(async () => {
  nuxt = new Nuxt({ ...config, server: { port: 3001 } })

  await nuxt.ready()

  await new Builder(nuxt).build()

  await nuxt.server.listen(3001, 'localhost')
}, 30000)

但是由于nuxt-property-decorator，它似乎无法渲染@Component 块并且我收到错误：

ERROR in ./components/Menu/PrimaryNavigation.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./components/Menu/PrimaryNavigation.vue?vue&type=script&lang=ts&) 16:0
Module parse failed: Unexpected character '@' (16:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import PrimaryNavigationItem from '~/components/Menu/PrimaryNavigationItem.vue'
| 
> @Component({
|   components: { PrimaryNavigationItem },
| })

这是我的Nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s - BillingAdmin',
    title: 'BillingAdmin',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ['~/plugins/repositories.ts', '~/plugins/veevalidate.ts'],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/stylelint
    '@nuxtjs/stylelint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    prefix: '/api',
  },

  // Proxy
  proxy: {
    '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } },
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      light: true,
      themes: {
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    babel: {
      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
    },
  },
}

这是 Jest 配置：

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',
  ],
  setupFiles: ['<rootDir>/test/unit/index.js'],
}

【问题讨论】：

如果你有，你能分享你的笑话配置吗？
@Areg 好的。刚刚添加，你现在可以查看了
我假设您使用npm run test 开始测试，对吗？
@Areg 是的，也许还有其他方法可以让这些路由运行，正如所说的主要内容，当我测试组件时，我得到：[vue-router] Route with name 'post- id'不存在
这是什么版本的nuxt？ Nuxt 2.9 及更高版本已经有官方 typescript 支持

标签： typescript vue.js jestjs ts-jest nuxtjs

【解决方案1】：

试试下面的

确保您使用 npm 或 yarn 在您的项目中安装了 nuxt-ts 和 nuxt-property-decorator。然后确保以这种方式设置以下文件。

jest.config.js

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1'
  },
  transform: {
    '^.+\\.ts?$': 'ts-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],

  collectCoverageFrom: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'lib/**/*.ts',
    'plugins/**/*.ts',
    'store/**/*.ts'
  ]
};

如果没有，请创建 tsconfig.js

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types",
      "@types/jest"
    ]
  }
}

【讨论】：