https://cypress.io logo
Join Discord
Powered by
# vue
  • s
    The test renders correctly and doesn't through the error after click anymore but now i have a "BootstrapVue warn" for multiple instances of vue detected. I think it may be because i'm using 
    @vue/test-utils
    when i 
    createLocalVue
    but if i try to use 
    @cypress/vue
    for it i get error 
    createLocalVue
    is not a function.
  • s
    Only thing is, i'm still not taking advantage of the global setup to prevent having to do this in every file.
  • s
  • s
    Yeah, createLocalVue isn't a function... hmmm...
  • s
    Yeah. I see why that would happen. I don't have a recipe for you right now.
  • m
    @User Do you know how to migrate v1 (alpha) usage of 
    Vue.nextTick
    ?
  • s
    To Cypress component testing? You don’t need to write it at all. Just delete the line. Cypress has retry ability built in and nextTick is an implementation detail of Vue.
  • b
    anyone know how to use the Vue devtools with component testing, if it's even possible?
  • s
    I don't think so due to iframe. There is a feature request open that may make it work with many solutions like this and storybook https://github.com/vuejs/vue-devtools/issues/353
  • s
  • b
    gotcha - thanks!
  • s
    @User @User we spent 3 weeks on integrating Vue Devtools in-browser because of the iframe issue, but ran into performance issues within Vue itself.
  • s
    I would wait to retry with vue-devtools-next once it's ready.
  • s
    👍
  • s
    We honestly find that you don't need it.
  • s
    Do you know how to debug components and their props within Cypress and the devtools?
  • s
    just put a debugger in a computed, etc it and you're good to go.
  • s
    I haven't needed it. I looked for it a while back when I was learning more about TDD on the front-end and realize I couldn't use- vue-dev-tools. since then i've learned to live without it and have been focused on gettingg more clear/consistent with front-end automated testing
  • b
    that's a neat trick - haven't done that. I've just been console logging cypress.vue and i try not to access that too much anyways. just thought it would be nice to use the devtools but it seems like they're a pain to integrate anywhere
  • w
    There's one other thing I sometimes do that I didn't know about for a long time, which is access 
    document.querySelector("#app").__vue__
    in the console for the frame. Combined with a .pause() before a failing assertion, you can get quick access to a lot of the stuff you might typically be inspecting with dev tools
  • s
    You can also get the wrapper pretty easily which gives you access to a lot.
  • s
    Here's an alias I wrote for the vuetify suite... https://github.com/JessicaSachs/vuetify/pull/2/files#diff-88e2b3923da43aba6da1ce98fcbc8eb33f3a94fea246b2860e6624ccd4ab6febL12
    Copy code
    js
import { mount as cyMount } from '@cypress/vue'
import { createVuetify } from '../../src/entry-bundler'

Cypress.Commands.add('mount', (component, options, vuetifyOptions) => {
  const vuetify = createVuetify(vuetifyOptions)
  const defaultOptions = {
    global: {
      plugins: [vuetify],
    },
  }

  return cyMount(component, { ...defaultOptions, ...options }).as('wrapper')
})
  • m
    I feel I wasted your time. That works on Cypress 7.4.0 and I was on an old version! Thanks for the help!
  • m
    Oh my I even found a bug now that we don't need 
    Vue.nextTick
    anymore 😱
  • g
    Hello. Excited about adding component testing to our vue2 library. Is there a way to use rollup instead of webpack for component testing? Perhaps using @cypres/rollup-dev-server?
  • b
    You could try using vite dev server
  • b
    All plugins are supersets of rollups
  • s
    @User vite should be a superset of rollup, so you should be good to go
  • s
    @cypress/vite-dev-server
    I suggest trying it from scratch to see how it works with your build 🙂
  • s
    and then adding it into your project following the docs
1...252627...37Latest