Hey everyone 🙂 I’m reading the docs on Vue component testing and I’m struggling to understand why does the chapter on

emit

have this

onChange

prop. I especially don’t understand the naming,. Obviously, this ties to

change

 emit, but where does the

on

come from? is this a naming convention? I wasn’t able to find any indicator either in Cypress or Vue test utils docs on this

Hi Filip, I believe when passing a prop (instead of an event), the name of the prop is the event name prepended with 'on'. Since the name of the event is 'change', the name of the prop is 'onChange'

that’s interesting. I couldn’t find a mention of this in vue docs or anywhere. it made sense and it was surprising to me when I was testing it out, but I wondered about it 🙂

Hi, I'm currently setting up cypress in a nuxt app, so far I followed the documentation and it works on Cypress side ( I can test a component yay ). The problem is when Nuxt is loading it doesnt recognize anything from cypress... here is the Media.cy.js file > import Media from "./Media.vue" > import 'tailwindcss/dist/tailwind.min.css' > > describe('', () => { > it('renders', () => { > // see: https://test-utils.vuejs.org/guide/ > cy.mount(Media) > }) > }) The configuration is the base one you can get when launching cypress open

Here is the error from Nuxt :

I'm on cypress 10.6 and nuxt 2.15

Hi everyone, how do we handle

v-model

in component testing? I have a

DataPickerComp.vue

component. How can I define and pass the v-model value for component testing? Thanks!

<template>
  <v-row justify="center">
    <v-date-picker v-model="picker" />
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      picker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
    };
  },
};
</script>

DatePickerComp.cy.js

import DatePickerComp from '../../../../src/components/elements/DatePickerComp.vue';
describe('DatePickerComp', function () {
  it('date model', function () {
    cy.mount(DatePickerComp);
  });
});

Hello all, 1.5h tutorial on Cypress and Vue 3. Hopefully it’s useful!! https://m.youtube.com/playlist?list=PLC2LZCNWKL9bLQrMQKfTnpihgW0VFSJ_n

Hi! I usually create a wrapper https://m.youtube.com/watch?v=SU_bsYprv6E&list=PLC2LZCNWKL9bLQrMQKfTnpihgW0VFSJ_n&index=2

Hi everyone, here I write a test to click on the drop-down button so that will see all available options in that. but when I click on the drop-down no options are displayed. here is my code, here I tried adding wait as well to let complete back end call, also tried to trigger click and direct click, but none of it worked. also tried the pipe plugin suggested by Gleb bahmutiv in this article. https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ but manually there is no issue with everything working as expected. for information, I'm using the cypress 9.6.1 version

@nutritious-restaurant-91514 hi there, can you help me to resolve above problem?

Is the goal just to see all the options? I wonder if you can do something like

cy.get('select').find('option')

or something along those lines.

@ancient-appointment-66951 This drop-down is a Button type (not a select type drop-down) here is some DOM sample. Thank you for your response, any suggestion would be helpful

You should just be able to do

cy.get

to get your elements - are you saying the options are simply not displayed during testing? That's weird - is the data fetched correctly?

Are there any resources on using Cypress 10 component testing with Vue and Ionic? I've seen this, but it is not using current versions so things appear to be different now: https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined

yes, during automation, the cy.get() finding the exact drop-down and click() performing on the same element but the options are not displaying. when I time travel, I see the actions performed exactly but the output that I should see options is not displayed. but during manual testing, the options of dropdown are displayed when we click on it.

When Can the Test Click?

Are you able to make a minimal example? I can't think of any obvious problem - definitely can look at some code if you've got some.

hi guys, how can i select an list item, like

my frontend is vue.js

cy.contains('div', 'Código da Loja') here i find the field, but now i want to bringdown the list, and select for example, 09000012

Here is a quick minimal repo showing how I got component testing to work with Vue+Ionic. There is probably a better way, but it works. https://github.com/crobinson-expl/vue-ionic-cypress-component-testing

Hello dear developers where I can pass the Auth0 authorization for Cypress tests with Vue 3 composition api, could you help me by sending me an example with real code with these versions. i see this example https://docs.cypress.io/guides/end-to-end-testing/auth0-authentication#Auth0-Application-Setup but is write in React and use auht0-spa-js library no have same methos that @auth0/auth0-vue PS: I see that there are several developers stuck on this part. I use the library: https://www.npmjs.com/package/@auth0/auth0-vue and cypress: 10.8.0

@microscopic-ice-2827 can you share a component/test you are trying to write? I think, in general, auth sounds like an E2E concern - not something you'd want to test with a component test. Or are you writing an E2E test and happen to be using the Vue Auth0 lib? Can you clarify?

Just wanted to say extra thanks for the async devserver config @ancient-appointment-66951 😄

Looking forward to using Quasar w Cyprss hehe

Sorry for the delay. Yes, I am trying to run cypress e2e tests with auth0-vue library but I have not been successful in bypassing auth0

Hello guys, I'm new here and i can't seem to find some good use case tests on canvas and how to draw or make signature, can someone help me with this, please ?

Hi, the following

typescript
mount(SomeVueComponent, { Props: { SomeNumber: 12 } })

doesn't provide intellisense for Props. Nor does it highlight errors when trying to put string inside a number prop etc. I noticed 'mount' has one overload where options parameter isn't of type 'any'. I had no luck forcing it to use that overload though. Pls help, I want my component tests to be more future proof with strongly typed props.

UPDATE: This is much better when migrating my "*.cy.ts" test files to "*.cy.tsx". TSX leads to perfect strong typing of props. Also forces you to provide all required props. But, there is one issue left in my case. When trying to call custom commands that worked before in "*.cy.ts", I get the following error: "Cannot read properties of undefined (reading 'global')"