'Module parse failed: Unexpected token in Cypress for Vue
I am trying to run a simple test in Cypress (./cypress/integration/simple.spec.ts)
import { sayHelloTo } from "../../src/demo";
describe("Simple", () => {
before(() => {
cy.log(sayHelloTo("Carl"));
});
it("Demo", () => {
expect(true).equal(true);
});
});
I want to import and use scripts from my ./src folder. This particular test uses the helper script ./src/demo.ts:
export function sayHelloTo(person: string): string {
return "Hello " + person;
}
export class DemoClass {
static myConst = 10;
}
When I run the test, Cypress throws the following error message:
Error: Webpack Compilation Error
./src/demo.ts 5:19
Module parse failed: Unexpected token (5:19)
File was processed with these loaders:
* ../../../../Library/Caches/Cypress/9.6.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| }
| export class DemoClass {
> static myConst = 10;
| }
|
@ ./cypress/integration/simple.spec.ts 1:0-44 4:15-25
Interestingly, if I comment out the class stuff (lines 5-7) in demo.ts, no error is thrown.
Webpack for Cypress is configured in ./cypress/plugins/index.js like so (taken from here):
const { startDevServer } = require("@cypress/webpack-dev-server");
const webpackConfig = require("@vue/cli-service/webpack.config");
module.exports = (on, config) => {
on("dev-server:start", (options) => {
return startDevServer({
options,
webpackConfig,
});
});
};
It seems like the TypeScript loader is not configured correctly but I can't interfere with it, since it is automatically loaded from the vue cli service (btw. vue-cli-service serve works perfectly fine).
This is my config file for TypeScript (./cypress/tsconfig.json):
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["esnext", "dom"],
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"types": ["cypress"],
"baseUrl": ".",
"paths": {
"@/*": ["../src/*"]
}
},
"include": ["**/*.ts"]
}
These are the dependencies from ./package.json:
{
"dependencies": {
"axios": "^0.27.2",
"body-parser": "^1.20.0",
"consul": "^0.40.0",
"core-js": "^3.22.2",
"express": "^4.18.0",
"express-pino-logger": "^7.0.0",
"mime-types": "^2.1.35",
"path": "^0.12.7",
"pinia": "^2.0.13",
"pino": "^7.11.0",
"rxjs": "^7.5.5",
"vue": "^3.2.33",
"vue-currency-input": "^2.4.0",
"vue-i18n": "^9.1.9",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"@cypress/vue": "^3.1.0",
"@cypress/webpack-dev-server": "^1.8.4",
"@cypress/webpack-preprocessor": "^5.11.1",
"@types/consul": "^0.40.0",
"@types/express": "^4.17.13",
"@types/express-pino-logger": "^4.0.3",
"@types/jest": "^27.4.1",
"@types/mime-types": "^2.1.1",
"@types/node": "^17.0.29",
"@typescript-eslint/eslint-plugin": "^5.21.0",
"@typescript-eslint/parser": "^5.21.0",
"@vue/cli-plugin-babel": "^5.0.4",
"@vue/cli-plugin-e2e-cypress": "^5.0.4",
"@vue/cli-plugin-eslint": "^5.0.4",
"@vue/cli-plugin-router": "^5.0.4",
"@vue/cli-plugin-typescript": "^5.0.4",
"@vue/cli-plugin-unit-jest": "^5.0.4",
"@vue/cli-service": "^5.0.4",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"@vue/test-utils": "^2.0.0-rc.21",
"clean-webpack-plugin": "^4.0.0",
"cypress": "^9.6.0",
"eslint": "^8.14.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.7.1",
"lint-staged": "^12.4.1",
"prettier": "^2.6.2",
"sass": "^1.51.0",
"sass-loader": "^12.6.0",
"typescript": "^4.6.3",
"vue-template-compiler": "^2.6.14",
"webpack-cli": "^4.9.2",
"webpack-node-externals": "^3.0.0"
}
}
Any help would be very much appreciated!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
