I assumed Angular since you said Beta 😄

Oh sorry this is React. It's been a few months since i worked with Cypress and I'm pretty sure it was all beta back then?

But of course! Thanks Bahmutov.

Hello everyone, I'm trying to set up the Component Testing module and faced the following blocker from the start when I try to open Cypress:

ERROR in ./node_modules/chargebee-typescript/lib/core.js:185:0
Module not found: Can't resolve 'http'
ERROR in ./node_modules/chargebee-typescript/lib/core.js:186:0
Module not found: Can't resolve 'https'
ERROR in ./node_modules/chargebee-typescript/lib/core.js:187:0
Module not found: Can't resolve 'os'
client (webpack 5.69.1) compiled with 3 errors in 4075 ms

Is there a way to ignore a specific module when Cypress is initiating? Thanks in advance.

what is your spec code? I think you are trying to load some Node code from the spec

you have the CCTDD book you have supplementary videos to the book - book intro - conference talk this one is pertaining to your 2nd question, testing component variants with combinatorial testing

@gray-kilobyte-89541 it is just a basic dummy spec. I am getting those errors when I just open Cypress Component module.

import ProBadges from '../../utils/proProfile/badges'

describe('firstComp', () => {
  it('playground', () => {
    cy.mount(<ProBadges/>)
  })
})

what does ProBadges look like? If that component is being wrapped by other things, you also have to wrap it in the test he's an extreme case, for components that use react-query, react-router, suspense and error boundary https://github.com/muratkeremozcan/tour-of-heroes-react-cypress-ts/blob/main/cypress/support/component.tsx#L19

that component is not related to the module throwing the errors. I am getting those errors even if remove that import and the cy.mount() from the spec and just run the Component module. Here I made a screencast: https://monosnap.com/file/JevVKZOKuZk6YK4aU6RUZuGNPmz3BL

Thanks a ton! Good use of the word "combinatorial". There should be a Combinatorial Tutorial someday.

here https://github.com/NoriSte/ui-testing-best-practices/blob/master/sections/advanced/combinatorial-testing.md you should be able to copy paste the code samples into the tool

oh that's peculiar can you do component testing in any other repo without issues? in this repo, can you serve the app without issues? what happens if you update Cypress? what happens if you remove the problematic packages from package.json?

Hi @kind-lock-48901 I’m curious if you are still having the problem, and what is in your support file for component testing. Maybe you have a custom mount command or something that imports something from that core.js file causing it the file to be parsed at run time? Otherwise I’m not sure what could be causing that code to execute.

I am trying to test a component and show me this error (uncaught exception)Error: useLocation() . Pls your guide on this

I have been working on getting MSW involved in component tests. I've got it data returning correctly about half of the time. For some reason I think that the service worker isn't starting before the tests. I have this in

cypres/support/component.ts

Cypress.on('test:before:run:async', async () => {
  if (window.msw) {
    console.log('MSW is already running');
  }

  //if MSW was not started by the app, Cypress needs to start it
  if (!window.msw) {
    console.log('MSW has not been started. Starting now.');
    await worker.start();
  }
});

Should I be starting MSW at a higher level? I figure I'm not the first one to try and use MSW with Cypress component testing.

Ultimately I would like to test my component without needing to access the api. I am completely know to inceptions. When I run the test without the inception in works. When I put in the inception logic if fails as follows. I have placed all of the source code on this post " const url = '**/tournaments/*' const fn = (resp: any)=> { console.log('growl'); return { status: false, payload: [new Tournament(), new Tournament()], };} cy.intercept(url).as('loaddata'); cy.mount(SelectTournamentComponent, config); cy.wait('@loaddata').then((interception) => { cy.log('interception', interception) })" When I run the test I get "mountSelectTournamentComponent 2 wait@loaddata CypressError Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: loaddata. No request ever occurred.Learn more projects/select-tournament/src/lib/select-tournament.component.cy.ts:35:10 33 | cy.intercept(url).as('loaddata'); 34 | cy.mount(SelectTournamentComponent, config); > 35 | cy.wait('@loaddata').then((interception) => { | ^ 36 | cy.log('interception', interception) 37 | }) 38 | cy.get('#select-tournament-widget') View stack trace" I can not figure out what I am doing wrong .

In my component, I am using this.router.navigate(['Some Route']).; I am getting a node_modules/@angular/router/fesm2020/router.mjs:3644:16 error which makes sense, since the component is only passed in the constructor the router. and no other Router Information. If I was using Jasmine, I would be using the RouterTestingModule. What is the process to see if the navigate method is called AND not try to move to the valid route? This is basic angular where is covered in the basic documentation?

I'm trying to test my components and my project uses Vite and React, when I mount plain JSX cypress mounts it right, but the problem occurs when I try to mount a component from lib UI, cypress gives me the error: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR')

So I am reaching out to my api and successfully returning a value. I do this via rxjs For testing purposes, I set up an intercept to return a different value. Visually it works, but my test fails. When I use cy.wait(50), the test passes, but I feel this is fragile. Is there anyway to tell the test to delay until after the code finishes running test code: " cy.intercept('**/auth-athlete/**', { status: true, payload: getMockTournaments(0) }); cy.get('[data-test="getPin"]').click() cy.wait(50); cy.get('[data-test="mtsNumberMsg"]').should('have.class','opacity-zero')" component code: " this.subSink.sink = this.authAthleteService .sendPin(mtsNumber) .subscribe((resp: any) => { this.isMTSNumberValid = resp.status; });" isMTSNumberValid controls where or not the template renders the error message has the class opacity-zero is there a way to view the current value of isMTSNumberValid from the test?

Reaching out to see if anyone has got path aliases working with Cypress in React Typescript, trying to avoid having to refactor all components to use absolute ../../ paths, posted my cypress webpack config and tsconfig's. And also anyone got cypress-real-events working for component testing too.

Hello everybody, I get this annoying error. It occures randomly and causes Cypress to die. Does anyone have an idea what is causing this and what I can do to get rid of it? Afte a crash it says that my config is invalid Apple M1 Pro macOS 13.1 (22C65) Chrome 109.0.5414.119 Im running Isolated Component Tests using latest Angular 15.1.0 I tried upgrading Cypress to the latest version but without luck. I tried downgrading Angular without luck either.

bash
Error: EPERM: operation not permitted, utime '/Users/USERNAME/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js'
    at utimesSync (node:fs:2025:3)
    at EventEmitter.CypressCTWebpackPlugin.onSpecsChange (/Users/USERNAME/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/CypressCTWebpackPlugin.js:64:13)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at EventEmitter. (/Users/USERNAME/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/dev-server.js:9:21)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at process. (/Users/USERNAME/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:513:28)
    at process.emit (node:domain:489:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/Users/USERNAME/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
    at emit (node:internal/child_process:939:14)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

The issue is, that no styles are injected currently. My test looks like this

import { NdlNotifications } from "../../ndl-notifications";

describe("NdlNotifications", () => {
  it("renders", () => {
    cy.mount(NdlNotifications);
  });
});

The problem seems to be, that the

NdlNotifications

component is a custom element and has the

.ce.vue

file ending. In the test runner it shows that it tries to mount

NdlNotifications.ce

(see attachment image) My index file for

NdlNotifications

looks like this

import { defineCustomElement } from "vue";
import NdlNotifications from "./NdlNotifications.ce.vue";

export { NdlNotifications };

export function register(tagName = "ndl-notifications") {
  customElements.define(tagName, defineCustomElement(NdlNotifications));
}

I have created a github repo. Please have a look at https://github.com/yavuzsecer88/cypress-vue-custom-elements The .ce.vue ending is necessary to use vue components as custom elements like

<ndl-notifications />

. You can start the application and see that the custom element is rendered with red color. In the test however the color is not applied, since the test runner tries to load the module

NdlNotifications.ce

instead of

NdlNotifications

.

I'm trying out component testing but run into issue with Cypress not finding angular.json since I don't have my Cypress folder structure in the same folder or below in the file hierarchy. I have the folder structure: webapp\ ... angular.json test\ cypress\ e2e\ support\ ... which confuses Cypress. Does anyone know how to configure Cypress to make component testing work with Angular (or probably any other web framework) application not in or in a parent folder from Cypress?

In my component test I'd like to stub a request via intercept, which is lazy fired by a component inside my component, but the request is never catched. The same stubbing works well in my traditional e2e test, but not in my component tests. What am I missing? Cypress displays the stubbing, but mention it is never catched. The test runs into a 404, cause it ignores the stubbing. -

cy.intercept("/api/test/xyz", {statusCode: 200, body: [{id: 1, name: 'hej'}]})

-

cy.mount(MyComponent, /** stuff */)

Thank you!

Hi All, I'm failing to get a snapshot of Button- hover state. I'm using realHover and cypress-plugin-snapshot to acheive this. Can anyone please share me your thoughts. Thanks.

Hi everyone. I am using Nuxt and am trying to test a component that access vuex store.. How do i pass store here. I get an error. saying 'v is not a constructor' if i use new Vuex.store(myObject). i have added componentOptions.extensions.plugins.push(Vuex); to the component.js file If i directly pass the store as an object with modules without doing new Vuex.store(myObject), then i get an error saying. 'cannot read properties of undefined reading 'myModule/'. Has anyone integrated it in your Nuxt projects?

Hi All, I'm new to React as a front end dev (I'm a QA engineer and have used cypress for years), as I'm teaching myself React. I'm following a course and would also like to add cypress component testing to my application as I'm doing the course. So i can build tests as I develop. I have a header component that displays different items depending if your logged in or not. I've got the component test to work so far as in it works and runs in the test runner fine, but the logic for checking if your logged in out not isn't displayed. And I think it's due to the component not having data in the redux store. The app runs fine when run normally, it's just the component. I can't find any resources that deal with Redux and Component testing and was wondering if anyone had any resources or advice. Thanks.

I have an Angular app where I want to reuse my mock environment (which is mocking the backend with Mock Service Worker) for Component tests. I run into problems with the test suite not even loading when running CT with MSW: https://www.loom.com/share/e200a7c9311d4b90af3899d04623ac0f

I have really enjoyed using Cypress to do component testing. Thanks for providing a great solution. In Lachlan Miller's video titled "Cypress CT 2/8 - A Useful Pattern for Wrapping Components" he presents an interesting way to wrap components in Vue. Has anyone done the same with React components. I would love to see what you are doing. Thanks in advance.

I am trying to simulate the reaction of my component given different paths specially /manage/athlete/info and /manage/athlete/stat. in the route module {path: 'manage/athlete/:tab, component: AppComponent{ the code below works as desired in e2e testing. this.subsink.sink = this.activatedRoute.paramMap.subscribe( (params: any) => { const tabIndex = params.tab === 'stats' ? 1 : 0; this.changeTab(tabIndex); } ); I do not know how to configure cy.mount to test the various values for :tab What I have so far is: const config = { imports: [CommonModule, RouterTestingModule], declarations: [AddAthleteComponent, RegisterAthleteComponent], providers: [ ], }; cy.mount(ManageAthleteComponent, config); cy.then(() => { const router = TestBed.inject(ActivatedRoute); cy.stub(router, 'paramMap') .returns(of({params:{tab:'info'}})); }); Thanks