【发布时间】：2022-09-29 20:24:26
【问题描述】：
我尝试在扩展一个更大的 vue 项目的同时编写一些 cypress 测试。这导致错误提示 cypress 未从 typescript 转换为 javascript。
我构建了一个最小的测试设置，包含以下文件：
-
src/components/HelloWorld.vue
<template>
<div class=\"hello\">
<h1>Test</h1>
</div>
</template>
<script lang=\"ts\">
import { Vue } from \"vue-class-component\";
export default class HelloWorld extends Vue {}
</script>
<style scoped>
</style>
-
src/components/HelloWorld.cy.ts
import HelloWorld from \'./HelloWorld.vue\'
describe(\'<HelloWorld />\', () => {
it(\'renders\', () => {
// see: https://test-utils.vuejs.org/guide/
cy.mount(HelloWorld)
})
})
-
babel.config.cjs
module.exports = {presets: [\'@vue/cli-plugin-babel/preset\']}
-
cypress.config.cjs
module.exports = {component: {devServer: {framework: \"vue-cli\", bundler: \"webpack\"}}};
-
vue.config.mjs空的 -
package.json
{
\"name\": \"todoapp\",
\"version\": \"0.1.0\",
\"private\": true,
\"type\": \"module\",
\"scripts\": {
\"serve\": \"vue-cli-service serve\",
\"build\": \"vue-cli-service build\",
\"lint\": \"vue-cli-service lint\"
},
\"dependencies\": {
\"core-js\": \"^3.6.5\",
\"vue\": \"^3.0.0\",
\"vue-class-component\": \"^8.0.0-0\",
\"vuex\": \"^4.0.0-0\",
\"node-polyfill-webpack-plugin\": \"^2.0.1\",
\"webpack-bundle-tracker\": \"^1.3.0\"
},
\"devDependencies\": {
\"@cypress/vue\": \"^3.1.0\",
\"@cypress/webpack-dev-server\": \"^2.3.0\",
\"@types/jest\": \"^24.0.19\",
\"@typescript-eslint/eslint-plugin\": \"^5.1.0\",
\"@typescript-eslint/parser\": \"^5.1.0\",
\"@vue/cli-plugin-babel\": \"~5.0.0\",
\"@vue/cli-plugin-eslint\": \"~5.0.0\",
\"@vue/cli-plugin-typescript\": \"~5.0.0\",
\"@vue/cli-plugin-unit-jest\": \"~5.0.0\",
\"@vue/cli-plugin-vuex\": \"~5.0.0\",
\"@vue/cli-service\": \"~5.0.0\",
\"@vue/compiler-sfc\": \"^3.0.0\",
\"@vue/eslint-config-typescript\": \"^8.0.0\",
\"@vue/test-utils\": \"^2.0.0-0\",
\"cypress\": \"^10.7.0\",
\"eslint-plugin-prettier\": \"^3.3.1\",
\"eslint-plugin-vue\": \"^7.0.0\",
\"prettier\": \"^2.2.1\",
\"typescript\": \"~4.1.5\",
\"vue-jest\": \"^5.0.0-0\"
}
}
-
tsconfig.json
\"compilerOptions\": {
\"target\": \"esnext\",
\"module\": \"esnext\",
\"strict\": true,
\"jsx\": \"preserve\",
\"importHelpers\": true,
\"moduleResolution\": \"node\",
\"experimentalDecorators\": true,
\"skipLibCheck\": true,
\"esModuleInterop\": true,
\"allowSyntheticDefaultImports\": true,
\"sourceMap\": true,
\"baseUrl\": \".\",
\"types\": [
\"webpack-env\",
\"jest\"
],
\"paths\": {
\"@/*\": [
\"src/*\"
]
},
\"lib\": [
\"esnext\",
\"dom\",
\"dom.iterable\",
\"scripthost\"
]
},
\"include\": [
\"src/**/*.ts\",
\"src/**/*.tsx\",
\"src/**/*.vue\",
\"tests/**/*.ts\",
\"tests/**/*.tsx\"
],
\"exclude\": [
\"node_modules\"
]
}
这是详细的错误消息：
The following error originated from your test code, not from Cypress.
> Module parse failed: Unexpected token (28:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Alternatively, can be defined in cypress/support/component.d.ts
| // with a <reference path=\"./component\" /> at the top of your spec.
> declare global {
| namespace Cypress {
| interface Chainable {
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
at (webpack://todoapp/./cypress/support/component.ts?:1:8)
at ./cypress/support/component.ts (http://localhost:8081/__cypress/src/cypress_support_component_ts.js:17:2)
at __webpack_require__ (http://localhost:8081/__cypress/src/main.js:281:43)
at __webpack_require__.t (http://localhost:8081/__cypress/src/main.js:314:39)
From previous event:
at runScripts (http://localhost:8081/__cypress/runner/cypress_runner.js:165186:63)
at onSpecWindow (http://localhost:8081/__cypress/runner/cypress_runner.js:153344:76)
at init (webpack://todoapp/../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/aut-runner.js?:11:14)
at (webpack://todoapp/../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js?../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js:19:8)
at ../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/ (packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js!../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js@http://localhost:8081/__cypress/src/main.js:40:2)
at __webpack_require__ (http://localhost:8081/__cypress/src/main.js:281:43)
at render (webpack://todoapp/../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js?:3:25)
at (webpack://todoapp/../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js?:5:2)
at ../../../../../.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/ (packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js@http://localhost:8081/__cypress/src/main.js:30:2)
at __webpack_require__ (http://localhost:8081/__cypress/src/main.js:281:43)
at (http://localhost:8081/__cypress/src/main.js:535:57)
at (http://localhost:8081/__cypress/src/main.js:537:13)
我已经走到尽头了。奇怪的是，让测试再次运行所需的唯一更改是将 vue.config.mjs 重命名为 vue.config.cjs，但由于原始 vue 配置文件是一个模块文件，所以我不能接受这个作为解决方案。
任何有关在何处继续研究以解决此问题的线索将不胜感激。
标签： javascript webpack cypress vuejs3