I am trying to do component testing using Cypress component test runner. The web components are built using stencil. We compile the stencil components and create respective "Angular component" and import them into our projects. We are using a mono repository.
The folder structure is like this rootNode\packages\angular\cypress
Under this angular folder, my spec file and the component will be available in the location angular\src\app\components\button
The component is as expected when launched in the angular app. When I tried to run the test for a component, I am getting the following error "Cannot GET /__cypress/src/index.html"
cypress.config.ts
import { defineConfig } from "cypress";
export default defineConfig({
component: {
devServer: {
framework: "angular",
bundler: "webpack",
},
specPattern: "**/*.cy-spec.ts",
indexHtmlFile: "cypress/support/component-index.html",
supportFile: "cypress/support/component.ts",
},
});
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular-example": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../../target/www/playbook/angular",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
{
"input": "../../node_modules/@nexus/core/dist/assets",
"glob": "**/*",
"output": "assets"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angular-example:build"
},
"configurations": {
"production": {
"browserTarget": "angular-example:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angular-example:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angular-example:serve"
},
"configurations": {
"production": {
"devServerTarget": "angular-example:serve:production"
}
}
}
}
}
},
"defaultProject": "angular-example",
"cli": {
"analytics": false
}
}
package.json
{
"name": "angular-example",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-eslint/template-parser": "14.0.2",
"@angular/animations": "13.3.9",
"@angular/common": "13.3.9",
"@angular/compiler": "13.3.9",
"@angular/core": "13.3.9",
"@angular/forms": "13.3.9",
"@angular/platform-browser": "13.3.9",
"@angular/platform-browser-dynamic": "13.3.9",
"@angular/router": "13.3.9",
"classlist.js": "1.1.20150312",
"core-js": "3.6.4",
"rxjs": "^7.4.0",
"tslib": "^2.3.0",
"web-animations-js": "2.3.2",
"zone.js": "~0.11.4"
},
"eslintConfig": {
"extends": [
"plugin:cypress/recommended"
]
},
"devDependencies": {
"@angular-devkit/build-angular": "13.3.9",
"@angular-eslint/eslint-plugin": "14.0.2",
"@angular-eslint/eslint-plugin-template": "14.0.2",
"@angular-eslint/template-parser": "14.0.2",
"@angular/cli": "13.3.9",
"@angular/compiler-cli": "13.3.9",
"@angular/language-service": "13.3.9",
"ng-packagr": "14.1.0",
"@types/jasmine": "3.10.3",
"@types/jasminewd2": "2.0.10",
"@types/node": "^18.0.4",
"@typescript-eslint/eslint-plugin": "^5.22.0",
"@typescript-eslint/eslint-plugin-tslint": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"@typescript-eslint/utils": "^5.33.0",
"codelyzer": "6.0.2",
"eslint": "^8.7.0",
"eslint-plugin-import": "2.25.4",
"jasmine-core": "4.0.0",
"jasmine-spec-reporter": "7.0.0",
"karma": "6.3.17",
"karma-chrome-launcher": "3.1.0",
"karma-coverage-istanbul-reporter": "3.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"prettier": "2.5.1",
"protractor": "7.0.0",
"ts-node": "~7.0.0",
"typescript": "4.6.2",
"angular2-template-loader": "0.6.2",
"istanbul-instrumenter-loader": "3.0.1",
"ts-loader": "9.3.0",
"webpack-dev-server": "3.11.3",
"html-webpack-plugin": "5.5.0",
"html-loader": "3.1.2"
},
"moduleDirectories": [
"<rootDir>/node_modules",
"node_modules",
"../../node_modules"
]
}
button.component.cy-spec.ts
import { ButtonComponent } from './button.component'
describe('ButtonComponent', () => {
it('mounts', () => {
cy.mount(ButtonComponent)
})
})
cypress\tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"es5",
"dom"
],
"types": [
"cypress",
"node"
],
"typeRoots": [
"node_modules/@types"
],
},
"include": [
"**/*.ts",
"../cypress.d.ts"
]
}
