https://cypress.io logo
Join Discord
Powered by
# vue
  • b
    Oh !! that's odd, can you share your package json and your yarn lock on a public repo?
  • a
    Oh man, this was such a sh*t-show haha. It wasn't actually Cypress directly after all, it just looked that way because it was actually something with Jest cache (which got cleared after a full re-install). The issue is still there, it seems unsolvable for now (also not interfering really), but seems to be an issue somewhere in the Jest eco-system. Sorry I should've reported this back earlier 🙂
  • r
    I have a very odd issue with a component test that looks like:
    Copy code
    ts
describe('MultiTreePicker', () => {
  it('should be visible', () => {
    const properties = ...;
    mount(MultiTreePicker, {
      propsData: { properties },
      cssFile: CSS.default,
    }).then(() => {
      (Cypress.vue as unknown as ShowModalComponent).showModal();
    });
  });
  it('should be visible 2', () => {
    const properties = ...;
    mount(MultiTreePicker, {
      propsData: { properties },
      cssFile: CSS.default,
    }).then(() => {
      (Cypress.vue as unknown as ShowModalComponent).showModal();
    });
  });
});
  • r
    the first succeeds
  • r
    the second fails with 
    Cypress.vue
    being undefined
  • r
    I get a bunch of vue directive complaints in the console too
  • r
    [Vue warn]: Failed to resolve directive: interact
  • r
    however I am setting these up with 
    Vue.directive('interact', interactDirective);
    before the test
  • r
    and have no issues in other tests
  • r
    if I move the second 
    it
    out of the describe block and into another describe (same file) it works
  • b
    Hi! I'm trying to make sure a Vue method was called using a 
    spy
    , but keep getting 
    Attempted to wrap undefined property onConfirm as function
    . I'm console logging the vue instance 
    Cypress.vue
    right before creating the spy and the method is there. Trying it like 
    const onConfirm = cy.spy(Cypress.vue, 'onConfirm');
    . Any idea what I'm doing wrong, or if there's a better way to make sure a method was called? Thanks!
  • w
    Hi! Curious about the goal here - is it possible to test something else that doesn't require spying on the method by name? Whatever effect it is supposed to have when run? Either way, here is how I access the vue-test-utils wrapper, where 
    .vue()
    is a command added the way that @User showed me from one of Jessica's repos, you can see some context here: https://discord.com/channels/755913899261296641/755921440359841852/832621748028440648
    Copy code
    findAndSelectCameraOption() // this just finds the thing where clicking it should emit an event
                .vue()
                .then((wrapper) => {
                    expect(wrapper.emitted('item-selected')).to.have.length(1);
                });
    So grabbing that wrapper and using that for your spies/assertions/whatever might put you in more familiar territory, and make any vue-test-utils examples easier to translate to cypress CT context, if you really do need to get into the weeds of component behavior.
  • b
    Thanks for the info! This is a component that's part of a component library. The component takes an 
    onConfirm
    function as a prop, so the test should make sure that that function was called at the right time
  • w
    Hmm, you might try the same pattern as above (with .vue()) but referencing the function as 
    wrapper.props().onConfirm
    . I suppose it's personal preference but I'd normally expect a library component to just emit a "confirmed" event and let the user worry about running the handler. But you might be doing something fancy that I'm not thinking of. Also I seem to run into this a lot lately so just in case - how are you logging 
    Cypress.vue
    ? It seems possible your spy is evaluated before 
    Cypress.vue
    is actually fully up and running. If you log 
    Cypress.vue.onConfrim
    instead at that same point, is it defined? I've been tripped up a ton by logging objects before they have been modified, but only expanding them in the console after they've been modified
  • b
    Yeah good point about the callback - probably better to use event rather than a callback. Would still be nice to be able to do that though. I've been tripped up a bunch with the console logs too. In this case I'm logging right before initializing the spy and the method is available in the log, so it doesn't seem like it would be an issue
  • w
    It depends - if you are logging the object but then manually expanding it in the console to look for the property, it will be evaluated in the console at the moment you expand it to check the contents, not the moment your 
    console.log
    actually ran. So logging before/after the 
    const onConfirm
    assignment is all the same in that case. Anyhoo I gotta run but I hope some of this was helpful, I have really liked component testing once I got everything running right
  • b
    oooh interesting. didn't know that. thx a bunch!
  • a
    If I would like to know how to properly call mountCallback, where should I go aside from peeking at the source code and going through each example linked in the @cypress/vue README ? Can't seem to find the documentation for it.
  • r
    I got a bit further with our issue
  • r
    does anyone know if component testing works for vue async components?
  • r
    we have:
    Copy code
    // Parent.vue
<template>
  <div>
    <Child v-if="condition" />
  </div>
</template>

// Child.vue
<template>
  <div v-custom-directive>
    Hello
  </div>
</template>
  • r
    upon the parent condition being true and loading the async child component
  • r
    it complains about the custom directive not being registered
  • r
    Copy code
    vue.runtime.esm.js:620 [Vue warn]: Failed to resolve directive: custom-directive

(found in <Child> at src/Child.vue)
  • g
    Hello everyone. Looking for a push in the right direction. What's the proper way to spy on Vue 3 component events? Following the method from the guide https://github.com/cypress-io/cypress/tree/develop/npm/vue
    Copy code
    js
  it('emits "increment" event on click', () => {
    const spy = cy.spy()
    Cypress.vue.$on('increment', spy)
    cy.get('button')
      .click()
      .click()
      .then(() => {
        expect(spy).to.be.calledTwice
      })
  })
})
    This works with Vue 2, but in Vue 3 I get the following error:
    Copy code
    Cypress.vue.$on is not a function
    Searching through issues didn't yield any results. Am I doing something wrong or should I open GH issue for this? Thank you.
    Copy code
    json
"cypress": "^7.7.0",
"@cypress/vue": "^3.0.1",
  • b
    +1 Was just looking for a hint for the same problem, would also be very interested in a solution
  • b
    @bland-advantage-37100 @User I invite you to watch @User great talk at vueconfus

    https://www.youtube.com/watch?v=7S5cbY8iYLkâ–¾

    And the repo that goes with it https://github.com/JessicaSachs/cypress-loves-vite It should give you some inspiration
  • b
    Thank you! For all those interested, she starts talking about $emit specifically around min 11:45 ... but the rest is interesting as well of course 😉
  • g
    Videos with @stocky-dream-36427 are always a treat to watch. Helped a lot. Thanks. Too bad spies can't be used to test Vue 3 components events though. Became accustomed to using them.
  • g
    Figured out a more elegant way to handle events than 
    expect(Cypress.vueWrapper.emitted("click")[0][0]).to.be.calledOnce
    . The key is to bind the event to the spy in the mount function using the attrs property. For example to spy on click event just do this:
    Copy code
    js
// Component.spec.js
const spy = cy.spy();
mount(Component, {
  attrs:
    onClick: spy
  }
})

// Then you can continue to work with the spy as usual.
 cy.get("button")
   .click()
   .then(() => expect(spy).to.be.calledOnce)
    Or the spy can be added after mount using setProps
    Copy code
    js
await Cypress.vueWrapper.setProps({onClick: spy});
1...282930...37Latest