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

Posted 2023-02-22

【中文标题】Jest 测试中出现意外字符“@”

【英文标题】：Unexpected character '@' on Jest Tests

【发布时间】：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/s-s-r-mode
  s-s-r: 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 支持

【参考方案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"
    ]