https://cypress.io logo
Join Discord
Powered by
# vue
  • s
    We actually extended the Vue Test Utils API, the extensions key is there for legacy.
  • s
    OH right, VTU has localVue and we don't pass that back to you in Cypress.
  • s
    In Vue 3's VTU, this is changed and will be available on { global: {....} } (Cypress matches VTU)
  • s
    Copy code
    js
import bootstrapVue from '@/src/plugins/bootstrap-vue';
mount(Score, {
  plugins: [bootstrapVue], // <-- this is the change
  propsData: {
    isEditable: true,
  },
});

// You really don't want to do this. This will actually be impossible to do in Vue 3. Is status a prop? If so, set it via propsData.
Cypress.vue.status.loading = true;

cy.get('.spinner').should('exist');
  • s
    @User check this out and tag me if it doesn't work.
  • s
    @User This is what I changed the test code to and what I'm seeing:
  • s
    You’re likely missing the root Css style sheet that you import inside of a main.js file or in a public HTML file.
  • s
    We don’t take your app-level setup code in by default.
  • s
    With fonts and loading spinners you may need font awesome to be loaded first.
  • s
    When you say loaded first, would that be configured in the mount or cypress config?
  • m
    Hi, all 👋 We're running 
    "@cypress/vue": "^1.1.0-alpha.2"
    without problems, but can't seem to upgrade to v2. It seems a lot has changed in the the way preprocessor is called. The Cli2 example folder on Github was the most helpful, but I got stuck because of webpack stuff: I get the infamous 
    You may need an appropriate loader to handle this file type
    (I'm using vue-cli and use the exact same config: https://github.com/cypress-io/cypress/blob/master/npm/vue/examples/cli2/plugins.js#L5) Also, it seems the code doesn't match the Readme in a lot of places.
  • m
    Do you have any ideas on how to progress?
  • s
    Hey. Yes, you're right. v2 is very different.
  • s
    We don't use the preprocessor at all.
  • s
    We use 
    @cypress/webpack-dev-server
  • m
    Ok, so would my plugins.js look like this then? https://github.com/cypress-io/cypress/blob/master/npm/vue/examples/cli-ts/cypress/plugins/index.ts I think I tried that, but will look up why I wasn't making progress tomorrow (and will let you know)
  • m
    Also, if I recall correctly, 
    @cypress/webpack-dev-server
    is not a dependency in 
    package.json
    of 
    @cypress/vue
     Nevermind, it is a devDependency and peerDependency (albeit "optional")
  • b
    Is there an example of how to use Vuex with component tests somewhere? I've gotten it to work by just manually adding the store object to the instance before, but now when one of my components is using 
    mapGetters
    it's throwing errors. I looked in the VTU docs and found examples of using 
    localVue
    but not sure if that's an option here. My general Vuex setup is pretty basic, so if anyone has had any success using it with component tests I'd love some guidance! This link https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/ works well for my non-component tests
  • s
    Hey @User we pass through to localVue
  • s
    that article is very out of date... Lemme show you how to do it 🙂
  • s
  • s
    The routing on the app is a bit funky... I need to update the examples. But vuex is good.
  • b
    Hey! That would be amazing. I’ll take a look at it tonight! Can I shoot you a question in this thread if I can’t figure it out? The only reason I say that is bc my project is a component library that uses vuex a lot and I find myself getting twisted in where/how I register modules and that kinda thing
  • s
    Yes, I need to turn my notifications on here.
  • s
    If for whatever reason I don't respond in a couple of hours, ping me on Twitter https://twitter.com/_jessicasachs
  • b
    Amazing. Thanks so much!!
  • s
    of course 👍
  • b
    @stocky-dream-36427 I got it to work when following your repo. I think I was confused by the docs in terms of how to mount a component (with 
    mount(Component, {...})
    or 
    mount({ components: { Component} })
    ) and passing in a template like you do. The docs have examples where the component is passed in as the first argument to 
    mount
    , and that's what errored out for me, although it's been working for almost all of my tests up until this point. As soon as I did it your way everything seems to work for this new component! Anyways - thanks for the reference! 🙂
  • n
    Hi guys, I trying to mock a server response in my vue application but the data not pass to mixin, @crypress/vue it's a good choice to do it?
  • s
    Super @User 🙂
1...567...37Latest