Vue-2 Jest-24运行测试错误,SyntaxError:意外字符“#”

bzzcjhmw  于 2023-05-27  发布在  Jest
关注(0)|答案(1)|浏览(116)

为Vue 2运行Jest测试时出错
大家好,我在运行Vue 2.6应用程序的测试时遇到了问题。(我使用sever-renderer)我试着写测试与我的路由器使用,它使用ts模块...
我的测试文件:

import { mount } from '@vue/test-utils';
import createRouter from '~/routers/index'; // CreateRouter not work
import ShoppingSarchPage from '@/pages/shopping/search/index.ts';

const router = createRouter();

describe('Router tests', () => {
  test('Search page renders correctly', () => {
    // simple test
    const wrapper = mount(ShoppingSarchPage, {
      router,
    });
    expect(wrapper.find('.shopping-search-page').exists()).toBe(true);
  });
});

~/router/index

import Vue from 'vue';
import Router from 'vue-router';
import configApp from '~/config';
import { makeLocation, Location } from '~/routers/define.ts';

Vue.use(Router);

import RouterServices, { Services } from '~/routers/services';
import RouterShopping, { Shopping } from '~/routers/shopping';
import RouterAuto, { Auto } from '~/routers/auto';
import RouterTech, { Tech } from '~/routers/tech/index.ts';
import RouterHtml from '~/routers/html';

// Exporting page names for navigation in components
export const Pages = {
  Home: 'page-home',
  Help: 'page-help',
  Contact: 'page-contact',
  Tariff: 'page-tariff',
  Terms: 'page-terms',
  Privacy: 'page-privacy',
  Favorites: 'page-favorites',
  error404: 'page-404',
  Services,
  Shopping,
  Auto,
  Tech,
};

export default () => {
  return new Router({
    mode: 'history',
    base: configApp.routeBaseUrl,
    routes: [
      {
        path: '/404',
        name: Pages.error404,
        component: () => import(/* webpackChunkName: "other" */ '~/pages/404.vue'),
      },
      {
        path: '/:lang(\\w{2}|\\w{2}-\\w{2})?/:city?',
        component: () => import(/* webpackChunkName: "other" */ '~/pages/base.vue'),
        props: (route): Location => ({ location: makeLocation(route) }),
        children: [
          ...RouterServices,
          ...RouterShopping,
          ...RouterAuto,
          ...RouterTech,
          ...RouterHtml,
        ],
      },
      {
        path: '*',
        redirect: { name: Pages.error404 },
      },
    ],
  });
};

下面是所有的配置
Vue 2.6.12 Vue-router 3.5 Node 12.22.12 Typescript 4 Jest 24
package.json

{
  "name": "vue-ssr",
  "private": true,
  "main": "index.js",
  "scripts": {
    "dev": "node banner && node --max-old-space-size=8192 --inspect index",
    "worker": "npm run build:worker",
    "start": "node banner && node --max-old-space-size=8192 index",
    "build": "concurrently \"npm:build:*\"",
    "build:client": "webpack --config build/webpack/client.js",
    "build:server": "webpack --config build/webpack/server.js",
    "build:worker": "webpack --config build/webpack/worker.js",
    "build:sprite": "node build/svg-sprite.js",
    "deploy-dev": "cross-env TARGET_DEPLOY=dev npm run build",
    "start-dev": "cross-env TARGET_DEPLOY=dev npm run start",
    "deploy-staging": "cross-env TARGET_DEPLOY=staging npm run build",
    "start-staging": "cross-env TARGET_DEPLOY=staging npm run start",
    "deploy-prod": "cross-env TARGET_DEPLOY=prod npm run build",
    "start-prod": "cross-env TARGET_DEPLOY=prod npm run start",
    "predev": "rimraf dist && npm run build:worker",
    "prebuild": "rimraf dist",
    "test": "jest"
  },
  "engines": {
    "node": ">=12.22.12",
    "npm": ">=6.4.1"
  },
  "dependencies": {
    "@mapbox/mapbox-gl-draw": "1.3.0",
    "@sentry/node": "6.19.7",
    "@sentry/tracing": "6.19.7",
    "@sentry/vue": "6.19.7",
    "@tinymce/tinymce-vue": "3.2.8",
    "@turf/turf": "5.1.6",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/vue2-jest": "^28.1.0",
    "axios": "0.27.2",
    "debug": "4.3.1",
    "dexie": "3.0.3",
    "imask": "6.4.3",
    "ismobilejs": "1.1.1",
    "mapbox-gl": "2.4.1",
    "moment": "2.24.0",
    "moment-timezone": "0.5.25",
    "node-cache": "5.1.2",
    "nouislider": "15.2.0",
    "query-string": "7.0.0",
    "runtypes": "5.0.1",
    "socket.io-client": "2.2.0",
    "sortablejs": "1.13.0",
    "swiper": "6.7.5",
    "text-clipper": "2.1.0",
    "throttle-debounce": "2.1.0",
    "tiny-date-picker": "3.2.8",
    "ts-jest": "^24.3.0",
    "twilio-client": "1.9.7",
    "twilio-video": "2.7.1",
    "uuid": "8.3.2",
    "vue": "2.6.12",
    "vue-drag-resize": "2.0.3",
    "vue-i18n": "8.27.1",
    "vue-mapbox": "0.4.1",
    "vue-meta": "2.4.0",
    "vue-no-ssr": "1.1.1",
    "vue-plyr": "7.0.0",
    "vue-router": "3.5.2",
    "vue-server-renderer": "2.6.12",
    "vue2-datepicker": "3.9.1",
    "vue2-perfect-scrollbar": "1.5.0",
    "vuex": "3.1.1",
    "vuex-router-sync": "5.0.0",
    "workbox-background-sync": "6.5.1",
    "workbox-broadcast-update": "6.5.1",
    "workbox-core": "6.5.1",
    "workbox-expiration": "6.5.1",
    "workbox-range-requests": "6.5.1",
    "workbox-routing": "6.5.1",
    "workbox-strategies": "6.5.1",
    "workbox-streams": "6.5.1",
    "workbox-window": "6.5.1",
    "zenscroll": "4.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@babel/eslint-parser": "7.11.5",
    "@babel/plugin-proposal-class-properties": "7.10.4",
    "@babel/plugin-proposal-decorators": "7.10.5",
    "@babel/plugin-proposal-json-strings": "7.10.4",
    "@babel/plugin-proposal-optional-chaining": "7.11.0",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/plugin-syntax-import-meta": "7.10.4",
    "@babel/polyfill": "7.11.5",
    "@babel/preset-env": "7.11.5",
    "@babel/preset-typescript": "^7.21.5",
    "@babel/register": "7.11.5",
    "@testing-library/vue": "^5.9.0",
    "@types/mapbox-gl": "2.4.0",
    "@types/sortablejs": "1.10.6",
    "@types/throttle-debounce": "2.1.0",
    "@types/twilio-video": "2.7.1",
    "@types/uuid": "8.3.0",
    "@types/vue2-datepicker": "3.3.1",
    "@types/workbox-background-sync": "4.3.2",
    "@types/workbox-broadcast-update": "4.3.1",
    "@types/workbox-core": "4.3.1",
    "@types/workbox-expiration": "4.3.1",
    "@types/workbox-range-requests": "4.3.0",
    "@types/workbox-routing": "4.3.1",
    "@types/workbox-strategies": "4.3.1",
    "@types/workbox-streams": "4.3.0",
    "@types/workbox-window": "4.3.4",
    "@types/zenscroll": "4.0.0",
    "@typescript-eslint/eslint-plugin": "4.4.0",
    "@typescript-eslint/parser": "4.4.0",
    "@vue/cli-plugin-unit-jest": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/test-utils": "1.1.0",
    "axios-mock-adapter": "1.16.0",
    "babel-jest": "24.8.0",
    "babel-loader": "8.1.0",
    "compression": "1.7.4",
    "concurrently": "5.1.0",
    "core-js": "3.6.5",
    "cross-env": "5.2.0",
    "css-loader": "2.1.1",
    "eslint": "7.11.0",
    "eslint-config-prettier": "6.12.0",
    "eslint-import-resolver-webpack": "0.13.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jest": "24.0.2",
    "eslint-plugin-jsdoc": "30.6.4",
    "eslint-plugin-prettier": "3.1.4",
    "eslint-plugin-unicorn": "22.0.0",
    "eslint-plugin-vue": "7.0.1",
    "express": "4.18.1",
    "express-winston": "4.2.0",
    "file-loader": "3.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "image-webpack-loader": "4.6.0",
    "jest": "24.8.0",
    "jest-serializer-vue": "2.0.2",
    "jest-transform-stub": "2.0.0",
    "jsdoc": "3.6.2",
    "jsdoc-vue": "1.0.0",
    "kouto-swiss": "1.1.0",
    "memory-fs": "0.4.1",
    "minami": "1.2.3",
    "mini-css-extract-plugin": "0.6.0",
    "null-loader": "2.0.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "polka": "1.0.0-next.3",
    "postcss-safe-parser": "4.0.1",
    "prettier": "2.3.2",
    "pretty-error": "2.2.0-rc.1",
    "pug": "2.0.3",
    "pug-plain-loader": "1.0.0",
    "raw-loader": "2.0.0",
    "rimraf": "2.6.3",
    "sass": "1.32.8",
    "sass-loader": "10.1.1",
    "sass-resources-loader": "2.1.1",
    "serialize-javascript": "5.0.1",
    "serve-static": "1.14.1",
    "style-loader": "0.23.1",
    "stylelint": "9.10.1",
    "stylelint-config-rational-order": "0.1.2",
    "stylelint-config-recommended-scss": "3.3.0",
    "stylelint-processor-arbitrary-tags": "0.1.0",
    "stylelint-processor-html": "1.0.0",
    "stylelint-scss": "3.6.1",
    "svg-sprite": "1.5.0",
    "terser-webpack-plugin": "1.2.4",
    "ts-loader": "8.0.5",
    "tslib": "2.0.3",
    "typescript": "4.0.3",
    "url-loader": "1.1.2",
    "vue-class-component": "7.2.6",
    "vue-eslint-parser": "7.1.1",
    "vue-jest": "4.0.0-beta.2",
    "vue-loader": "15.9.3",
    "vue-property-decorator": "9.0.2",
    "vue-template-compiler": "2.6.12",
    "vue-test-utils": "^1.0.0-beta.11",
    "vuex-class": "0.3.2",
    "vuex-module-decorators": "1.0.1",
    "webpack": "4.44.2",
    "webpack-command": "0.5.0",
    "webpack-dev-middleware": "3.7.2",
    "webpack-hot-middleware": "2.25.0",
    "webpackbar": "3.2.0",
    "winston": "3.7.2",
    "winston-daily-rotate-file": "4.7.1"
  }
}

babel.config.js

module.exports = {
  plugins: [
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-proposal-json-strings',
    '@babel/plugin-proposal-optional-chaining',
  ],
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    '@babel/preset-typescript',
  ],
};

tsconfig.json

{
  "exclude": [".git", ".idea", "assets", "dist", "docs", "node_modules"],
  "include": ["**/*"],
  "compilerOptions": {
    /* Basic Options */
    "incremental": false /* Enable incremental compilation */,
    "target": "ES5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
    "lib": ["es2020", "dom", "WebWorker"],
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "outDir": "./dist" /* Redirect output structure to the directory. */,
    "rootDir": "." /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
    "baseUrl": ".",
    "sourceMap": true,
    "paths": {
      "~/*": ["src/*"]
    },
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./dist/build-info" /* Specify file to store incremental compilation information */,
    "allowJs": true,
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    "importHelpers": false /* Import emit helpers from 'tslib'. */,
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    /* Strict Type-Checking Options */
    "strict": true /* Enable all strict type-checking options. */,
    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
    /* Module Resolution Options */
    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    /* Experimental Options */
    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    /* Advanced Options */
    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
  }
}

jest.config.js

module.exports = {
  rootDir: '.',
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue', 'ts', 'tsx'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
  transformIgnorePatterns: ['/node_modules/'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
  },
  testURL: 'http://localhost:8000/',
};

伙计们,请分享你的猜测和可能的解决方案<3什么可能是错的,一个不同的版本在一些软件包,或一些软件包应该匹配的版本?o_O
错误:
testing error

cotxawn7

cotxawn71#

这可能与您在.vue组件中使用速记模板语句有关。Vue 2.x在运行测试时使用pug和速记模板语句时存在问题(参见:https://github.com/vuejs/vue-jest/issues/175
从错误来看,它可能在您的Map组件中。有两种方法可以解决你的问题。
第一个是如GitHub中所述,将以下内容添加到jest.config.js文件中。

module.exports = {
  // ...
  globals: {
    'vue-jest': {
      pug: { doctype: 'html' }
    }
  }
}

第二个选择,如果上面的不起作用(对我来说没有,因为在一些包中有一个我无法解决的bug),就是不使用速记模板标签。
尝试查找类似于template(#someslot)的语句,并将其替换为template(#someslot="")template(someslot="")

相关问题