oh awesome!

We should probably make the readme links absolute

Definitely. I never would have thought to look there, and the npm page is far higher on the search results

Is anyone else having trouble rendering slots in the most recent version of cypress? I keep getting a 'Cannot convert undefined or null to object' whenever I try to mount a compliment like this:

Mount(SlotTest, { 
  slots: { 
    default: 'slot content' 
  } 
})

I'm having this too. Help!!

Hello guys. I have a component with a button which emits an event, but it does so from an async function. In my test I call Cypress.vueWrapper.emitted() but the event is never returned, even under the

then

after clicking the button which fires the event. Is there any way to capture an async emit?

// MyComponent.vue
const emitAsync = async () => {
  const x = await something();
  emit('myEvent', x);
};

// MyComponent.spec.js
cy.get('.button-which-fires-my-event').click().then(() => {
  // Cypress.vueWrapper.emitted('myEvent') is always undefined 😢 
})

Hey there, is anyone using Composition API with Vue3 and Component Test Runner? Since

setData

on

vue-test-utils-next

will not initialise any data that we define on the setup, is there a way of setting mocked data for a ref inside of a component (without using props)

(click on the component?)

@User You are right, thank you for reminding us. Unfortunately we did not set this up yet. We found it counter-intuitive to mock anything in our components so we put this for later.

This could be an interesting debate to have in iteration number two. - Should we start with mocking dependencies? - Should we start with injecting the state

Hey all ✌️ Can you help me to get cypress component testing to work with jsx? I have attached my testfile "TestComponent.cy.jsx". The error is:

Cannot read properties of undefined (reading 'props')

It works when I mount my component like this:`mount(TestComponent)` Do you know what I am missing here? Let me know if you need further information.

Try

js
mount(<TestComponent />)
  .get(textSelector)
  .should('be.visible')

Then it says 'h is not defined'

h is not defined

is there a right way to deal with v-model ?

What do you mean?

any 1 used cypresss new test runner with Quasar v1?

Hi, i have an vue 3 app with components from Primevue for example a toast https://primefaces.org/primevue/showcase/#/toast I wanna write some component test with cypress how can I integrate dependencies from Primevue or is this possible?

@User you can add plugins/extensions when mounting your component with the

mount

command. In this case, you would likely be adding

PrimeVue

here. The documentation here should help https://next.vue-test-utils.vuejs.org/api/#global

Hi all, I encountered a same issue as describe in stackoverflow https://stackoverflow.com/questions/69850493/issue-testing-components-with-slots-with-vue-and-cypress/ regarding mounting of slots. Here is a screenshot of the stacktrace.

@User Looks like it matches up with an issue we have here: https://github.com/cypress-io/cypress/issues/18219 Can you try replacing the slot value with a render function as described in the issue?

Hello, I wanted to test nested comps with Cypress. The imports within the component are called using aliases

import AppCard from '~/components/base/AppCard/AppCard.vue'

However, when I run the test, no AppCard is rendered. No error is displayed. I assume that Cypress cannot reload the downstream components. How can I make this happen?

Hey all, just getting started with @cypress/vue library and I can't currently get cypress to recognize my vue files. The error I'm getting from cypress is saying: 'Error: Webpack Compilation Error ./src/components/activities/GanttTable.vue 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. > | | <div' Here is the current config file:

const { startDevServer } = require('@cypress/webpack-dev-server')

const webpackOptions = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: { loader: 'vue-loader' }
      }
    ]
  }
}
const options = {
  webpackOptions,
  watchOptions: {}
}
module.exports = (on, config) => {
  on('dev-server:start', async () => startDevServer({ options }))
  require('@cypress/code-coverage/task')(on, config)

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

Does anybody see what I am doing wrong?

I'm a total newbie here but I'm finding first of all you want to make sure to use version 9.0.0 (cypress@9.0.0) unfortunately I've been having problems with the newer versions.. Second, check your

cypress.json

file in your project directory. Perhaps since you're using vue templates you'll want to investigate how to have that file configured properly.

(it appears 9.2.1 is available today)

I'm testing a Paginator-Component which has a v-if on the outer tag to hide it if there is only one page. Can somebody help me how to test this?

I tried this ....

mount(Paginator, { props: { currentPage: 1, maxPage: 1, }) .vue() // custom command to get test-utils wrapper .then((wrapper) => { expect(wrapper.html()).to.eq('') })

but this is very hacky ..... I hop there is a better way 🙂

and another one ....