I've seen a few of these posts on stack with no clear solution. I'm trying to leverage Cypress's component testing with the following:
import { GroupPage } from './group.page'
describe('StepperComponent', () => {
it('mounts', () => {
cy.mount(`<app-group></app-group>`, {
declarations: [GroupPage],
})
})
})I've also tried this way:
import { LoginPage } from './login.page'
describe('LoginPage', () => {
it('mounts', () => {
cy.mount(LoginPage)
})
})I've updated my config file with the following per the instructions I've seen online regarding this issue:
component: {
devServer: {
framework: "angular",
bundler: "webpack",
},
specPattern: "**/*.cy.ts",
indexHtmlFile: "cypress/support/component-index.html",
supportFile: "cypress/support/component.ts",
},"cypress": "^10.7.0",
"@ionic/angular": "^6.1.9",
"@angular/compiler-cli": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/fire": "^7.4.1",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
Here's the component I'm trying to test:
import { Component, OnInit } from '@angular/core';
import { Auth, getAuth } from '@angular/fire/auth';
import { UserService } from 'src/app/services/user.service';
import { PresentationsService } from 'src/app/utilities/presentations.service';
@Component({
selector: 'app-traval-group',
templateUrl: './traval-group.page.html',
styleUrls: ['./traval-group.page.scss'],
})
export class GroupPage implements OnInit {
userInfo: any;
auth: Auth;
constructor(private presentService: PresentationsService,
private userService: UserService) { }
async ngOnInit() {
this.auth = getAuth();
this.userInfo = await this.userService.getUserInfo(this.auth.currentUser.uid);
}
createGroup() {
if ((!this.userInfo) || (!this.userInfo.userInfo?.dateOfBirth)) {
this.presentService.missingData("", "")
return
}
}
}