https://cypress.io logo
Join Discord
Powered by
# vue
  • f
    I have a component that uses inject like this to bring in what is now just a static .json resource. How do I provide the same json file to the mount function for component testing?
  • f
    Copy code
    import { mount } from "@cypress/vue";
import Review from "./Review.vue";
import reviewConfiguration from "../assets/ReviewConfiguration.json";

describe("Review", () => {
  beforeEach(function() {
    mount(Review, {
      // provide reviewConfiguration to mount?
    })
  })


  it("Will test something", () => {
    
  });
});
  • f
    That is the test code I have so far
  • w
    Looks like you are pretty close, since this is the vue-test-utils mounting system, the syntax here should work for 
    provide
    with the json https://vue-test-utils.vuejs.org/api/options.html#provide
  • f
    @User I try this provide a couple of different ways and get effectively the same TS error. Doesn't this mean 'provide' is not compatible with cypress mount options?
  • f
    If it could help, this is how my app handles the provide when serving normally. I thought this would be a pretty straightforward thing to mock, but maybe not? I'm far from a Vue or TypeScript expert though, so it could very well be some basic stuff I don't understand...
  • w
    hmm, I was sure we had a component test spec with 
    provide
    already at my job, I'll see if I can find it
  • f
    thanks a bunch
  • f
    @User Perhaps this is all I needed. I don't get any TS errors at least, but the component still doesn't mount for some reason, but it gets past the undefined from Stages, so I'm pretty sure the Provide is working. Found this randomly as I was watching some video on component testing, haha. Is Cypress working on a document for the mount function and all its options? I look forward to something like that 🙂
    Copy code
    import { mount } from "@cypress/vue";
import Review from "./Review.vue";
import ReviewJson from "../assets/ReviewConfiguration.json";

describe("Review", function() {
  beforeEach(function() {
    mount(Review, {
      global: {
        provide: {
          reviewConfiguration() {
            return ReviewJson;
          }
        }
      }
    });
  })

  it("Will test something", () => {
    
  });
});
  • w
    oh interesting. I haven't had to put anything in global like that 🤷‍♂️ this makes me curious though, which I kinda why I like hanging out in this discord
  • f
    I wouldn't imagine it makes a difference, but I am using @cypress/vue 3.0.0-beta.3
  • w
    As for documentation, it really is vue-test-utils mounting function so all those docs should apply. https://github.com/cypress-io/cypress/blob/c2f91f6364703cc6a354ba5b51a7d2acf22dde4b/npm/vue/src/index.ts#L3
  • f
    I completely believe you there. Just a matter of getting things to work as expected in this case. I'm hoping someone from Cypress comes and sheds more light on what I'm doing wrong and why 🙂
  • a
    Hi @User , I will try to help. At first glance, I think that 
    global.provide
    is supposed to be a key/value. So something like:
    Copy code
    mount(Review, {
  global: {
    provide: {
      reviewConfiguration: ReviewJson
    }
  }
});
    Might work.
  • a
    It's working for me. I made this minimal example: https://github.com/lmiller1990/vue-3-cypress-vite/commit/830a6b09df0c13faab75489ebbcb40cc6b2a8e65 You could pull it and try it out. It's possible there is a problem with class component, there are a few open issues in test utils relating to class component. If that's the case, I can look into it, but try using 
    provide
    with a key/value (not a function) and see what happens first.
  • f
    @User thanks for the response. It seems the main thing I was missing for syntax was the 'global:' part. I actually found that earlier in a video you had made :). As for whether the key value pair is the only way to go or if providing a method with return also works or not, I am not sure. I was a little confused with examples or docs seeming to show both. I'm glad your example works, as that seems simplest. I also think the component I was trying to mount had other problems unrelated to provide/inject so that complicates things. The component has since been scrapped and redone entirely, and I'm not sure we will use any inject/provide patterns, so I'll have to keep an eye out in the future.
  • f
    Hi, not sure if anyone can help. New to cypress ct, currently using cypress/vue 3.0.3 and cypress 8.2.0. Unlike all the examples in docs and tutorials online, my components don't seem to be unmounted after each test. By way of a trivial example:
    Copy code
    import { mount } from "@cypress/vue";
import BaseButton from "./BaseButton";

describe("BaseButton.vue", () => {
  it("Renders text using default slot", () => {
    mount(BaseButton, {
      slots: {
        default: "Test button",
      },
    });

    cy.get("button").should("have.text", "Test button");
  });

  it("Renders some different text via slot", () => {
    mount(BaseButton, {
      slots: {
        default: "Test another button",
      },
    });

    cy.findByRole("button");
  });
});
    Results in failure of findByRole since it finds multiple buttons. I can fix it using:
    Copy code
    afterEach(() => {
    Cypress.vueWrapper.unmount();
  });
    ...but nobody else seems to need to do this in the examples?
  • r
    Hi, anyone knows how to inject an HTML tag when using cypress ct?, I'm using Vuetify, and I need my components to be wrapped by a "v-app" tag
  • w
    Hey, I had this issue too and added my solution to this repo where Bart had already got some vuetify stuff going: https://github.com/elevatebart/cy-ct-vuetify/blob/main/cypress/support/commands.js We override the stock mount command and do some modifications to the the DOM in our new command. The key part for your question is line 36. You may also need to add a display:block on your root element there - a coworker did that at work - because when you do have that data-app attribute on the root, Veutify makes it display:flex or something and that can mess with your component layout.
    r
    • 2
    • 4
  • r
    Vuetify issue
  • q
    Hey there :) I'm pretty new to cypress and Vue but wants to get started with component testing in vue. Writing such a test is pretty simple but the runner does not really run as the build runs for more than 30 minutes because it is building it productive. We use custom npm tasks that are declared in package.json to serve the application in development mode locally. This takes about 2 minutes as it is leaving out the minify steps, etc. Is there a way to tell cypress to use one of my defined npm task instead of using the "build productive" task?
  • r
    Hi again, I'm having this issue with the font I don't find any way to fix it 😞
  • r
    Cypress
  • r
    Browser
  • r
    (BTW, I'm using vuetify and cypress ct)
  • w
    Hey there, would be curious if in the browser this component is inheriting any styles that might be declared higher up the tree, like in your App.vue, and those styles are not present when the component is mounted on its own? There could be other causes, like I've seen Veutify render differently in FF vs Chrome, for example. Maybe something to check is, in the browser, where is the letter-spacing CSS property coming from in the post body text?
  • r
    According to this post on Stack Overflow, any link on the header is not loaded, so we have to include it in the custom mount function (where we included Vuetify), so the fonts can be loaded on each mount https://stackoverflow.com/questions/67462210/how-to-import-cdn-stylesheet-link-into-cypress-component-test-runner
    • 1
    • 2
  • r
    Another problem I'm having is trying to emit an input event from a component
  • r
    I saw this but after trying on my project it didn't work
  • r
    My test is about getting an input event from a child component that has a text field inside
1...293031...37Latest