Child component

From parent component

I tried this, but It returns only the current component where I'm doing the test

So in short, how can I access a child component to force it to emit an event to then capture it and check if there was a side effect of that event on the component I am testing?

Font issue

I think the best way to approach this is to use cypress to select that textarea and

.type

some value in, then check for the expected side effect in the component you are testing. Is there a reason you need to access the instance of the child component to force the input event to fire? I am curious if I'm missing something about your context.

Beyond testing the component that has a text field, I need a way to test for side effects caused by events emitted by child components. And I have not been able to find any way to do it with cypress ct.

This is an example made with jest and vue-test-utils to test a side effect caused by emitting a retry event, which causes a side effect in the tested component and then expect a different behavior in the child event due to the changes caused by the retry event. So far, I can't find something like this in cypress to test side effects.

So, I'm trying to do something like: 1. Get child component 2. Force it to emit an event 3. Make an assertion for the impact of the event on the Parent component (current component being tested)

BTW, thanks for helping me for like 3 days in a row @User 😅 😃

Lol as it happens I've been playing around with a blog post about stuff I learned getting Veutify + Cypress component tests up and running at my job, so this is all kinda relevant for me 🙂 So a couple of things might be relevant here. I've done a similar thing where I tested a component that used

v-combobox

or something, and the parent component would emit certain events and also render some stuff based on what had been typed into the box and what the results were. For me, that meant my component test would: - render the component - type some stuff in the box - inspect the dom for our custom list suff and make assertions - call Jess's lil

.vue()

command to get the vuetify wrapper of my component (not sure why this was not working for you?) - assert the correct events where fired from the parent component Both the DOM updates and the parent component were reacting to events from the vuetify component. What I'm not sure about is - why force the event, instead of doing what a user would do to fire the event?

Because forcing the event allows you to test only the things that matter to the component being tested, i.e. you don't have to care if there is a v-combobox or something else capturing the user input, the parent component should only care about the events emitted by the child component, that way your component is being tested in isolation.

I am lucky that our interests are aligned then 😆

BTW, Jess command .vue() was a custom command and I didn't know that until I activated the sound of the video 😅 .

And still, that is something like

mount(component, options).then(()=> { Cypress.vue })

, which is a way to get the mounted component

The difference is when you get the Vue Test Utils wrapper (vueWrapper) I think you do have access to findComponent etc if you really want. Haven’t tested that though. For me I would be using a selector like the form field label or a data-testid - not caring about what exact component renders the form, but I do care that my parent component renders a text field which a user interacts with to cause certain things to happen. So to me the isolation of artificially triggering the events reduces the value of the test. Since in theory if the child components text field became hidden by an other element or disabled or something, I’d still have a passing test but the user would not have the functionality. This not a real solution to your problem though, if you don’t like that dependency.

In a way, you are right, since it wouldn't matter much if the component passes the test but fails its purpose. However, I would like to do the tests in isolation, as it allows me to not have to do things that I have already done in the tests of the child components. So apparently I will have to go back to jest+vue-test-utils to be able to do it. I imagine that in the future they will add that functionality.

No one? 😦

Well what a pity, cant use cypress then I guess 😦

Hey @User just seeing this!

You need to use your webpack configuration for mode === development

Are you using Vue CLI?

It has nothing to do with the npm tasks, as Cypress just imports Vue CLI and executes webpack directly instead of from the command line.

If you have certain environment variables like NODE_ENV or MODE that specify production, you need to set those variables to the development ones because Cy will just do whatever Vue CLI does. If you give me a reproduction I can take a look.

Ok thank you! I'll try this

Hi Everyone As a JavaScript & PHP software engineer, I am looking for a full-time job using my skills recently. If you have any jobs, please let me know. I hope your business is doing well Thanks for your time.

Is it just me, or is every single example file link from https://www.npmjs.com/package/@cypress/vue broken?

Yeah !! all the images are busted

Yeah, I'm struggling with something as simple as mounting a component that uses vuex and i18n stuff since I can't see any examples...

See thsi one fro the real deal https://github.com/cypress-io/cypress/tree/develop/npm/vue