https://cypress.io logo
Join Discord
Powered by
# vue
  • a
    Vue 3
  • b
    OOOOOOOOoooOOOoOOOoOOOo !!!
  • b
    did not see this one coming
  • b
    have you tried this:
    Copy code
    mount().then(() => {
Cypress.vueWrapper.setProps ?
})
  • a
    Oh this is funny, if I 
    console.log(Cypress.vueWrapper)
    after setting the props it has the correct classes, but is not reflected when using 
    cy.get('button'
    🤔
  • b
    cypress mount is waiting for cypress to be ready to invoke the mount function
  • a
    Let me try this
  • b
    so if you act after the fact on the wrapper, it will be too early and the mount will happen with the old props
  • b
    Copy code
    js
it('renders a primary button', () => {
      mount(AsButton, {
        propsData: {
          type: btnType.PRIMARY,
          label: `I'm a sexy button`,
        },
      }).then(() => {

      Cypress.vueWrapper.setProps({
        type: btnType.SECONDARY,
      });

      cy.wait(1000);

      cy.get('button').should('have.class', 'btn-secondary'); // Fails
});
    });
  • a
    Confirmed, it work 👏 🥳
  • b
    yeah. we need to simplify this process somehow
  • b
    In the meantime you can probably write a wrapper around your mount with default options
  • a
    maybe a wrapper method on that 
    mount
    function that retrieves the vueWrapper as a promise
  • a
    LOL same solution haha, 🤣 . Awesome thanks! I'm gonna drop a Video Tutorial on this probably on Monday, will let you guys know
  • b
    Promises are a hot issue at Cypress since we use Bluebird for a lot of its extra features
  • b
    I hope one day BlueBird will wrap native promises...
  • b
    Thank you @User !! I can't wait to watch it 😉
  • a
    Thanks to you for helping me out, cheers 🍻
  • t
    Hello, today I tried once to use the Nuxt Config from the repo (
    https://github.com/travis5491811/cypress-vue-nuxt/blob/main/cypress/plugins.js
    ). For testing the basic test with the logo. Unfortunately I get a lot of warnings when I run the test:
    Copy code
    js
WARNING in ./node_modules/@cypress/vue/node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.js 2205:16-24
   "export 'reactive' was not found in 'vue'
    @ ./node_modules/@cypress/vue/dist/cypress-vue.esm-bundler.js
    @ ./components/cytest/helloWorld.test.js
    @ ./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js
    @ ./node_modules/@cypress/webpack-dev-server/dist/browser.js
    Cypress itself tells me that the error comes from the test code itself:
    Copy code
    bash
The following error originated from your test code, not from Cypress.
  > Object(...) is not a function
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
    Test looks like this, the tested is the regular Nuxt logo component.
    Copy code
    js
import { mount } from '@cypress/vue'
import Logo from './Logo'

describe('check logo', () => {
  it('contains an svg', () => {
    mount(Logo)
    cy.get('svg').should('be.visible')
  })
})
  • b
    Hello @thankful-battery-80804. Since reactive is only in vue 3, it seems that there would be a version mismatch between a vue 2 version and a vue 3 version.
  • b
    Most probably @cypress/vue is on version 3.0.1 while vue &nuxt are on version 2.X
  • b
    Can you share this part of your package json
  • b
    Nuxt version, vue version, vue test utils, @cypress/vue, @cypress/webpack-dev-server?
  • b
    Whatever detail you can share will help us help you
  • t
    Copy code
    "nuxt": "^2.15.4",
    "@cypress/vue": "^3.0.1",
    "@cypress/webpack-dev-server": "^1.1.2",
    "@nuxt/test-utils": "^0.2.0",
    "@vue/test-utils": "^1.1.3",
    "cypress": "^7.0.1",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.9.6",
    "webpack-dev-server": "^3.11.2"
  • t
    but i test with cypress/vue 2.x
  • t
    aaaah nice its working now
  • b
    Lovely
  • t
    thank you
  • b
    We probably need to add some mismatch warnings here and there like vue does for the template loader
1...111213...37Latest