为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
1条答案
按热度按时间cotxawn71#
这可能与您在.vue组件中使用速记模板语句有关。Vue 2.x在运行测试时使用pug和速记模板语句时存在问题(参见:https://github.com/vuejs/vue-jest/issues/175)
从错误来看,它可能在您的Map组件中。有两种方法可以解决你的问题。
第一个是如GitHub中所述,将以下内容添加到
jest.config.js
文件中。第二个选择,如果上面的不起作用(对我来说没有,因为在一些包中有一个我无法解决的bug),就是不使用速记模板标签。
尝试查找类似于
template(#someslot)
的语句,并将其替换为template(#someslot="")
或template(someslot="")
。