This is a setup I am using in a vite + vuetify 3 + typescript + cypress setup

javascript
import vuetify from "@/plugins/vuetify";
import { mount } from "@cypress/vue";
import Alert from "./Alert.vue";
import store from "@/store";

beforeEach(() => {
  mount(Alert, {
    extensions: {
      use: [vuetify],
    },
  });
  store.setAppAlertData({
    title: "Test",
    type: "success",
    message: "Test should pass!",
  });
});

describe("Alert", () => {
  it("renders Alert", () => {
    cy.get("[data-testid=Alert]").should("exist");
  });
});

I am getting this error that vue() custom method is not available, I am looking to test emitted events... anyone have an idea what I have missed?

where is the vue() method ? in command.js?

You have to add it yourself... I'll take you on a thread @best-toothbrush-1100

Anyone here been able to test provide/injects in their components in vue 3?

Hey, trying to setup Vue component testing with Cypress and I am struggling with this error. Any idea?

ERROR in src/components/Campaigns/CampaignRow.cy.ts:5:9
TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'CompatVue' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<Readonly<ComponentPropsOptions<Data>>, unknown, unknown, {}, {}, Record<string, any>, ComponentOptionsMixin, ComponentOptionsMixin, string, Readonly<...> & { ...; }, { ...; } | {}>'.
      Type 'CompatVue' is not assignable to type 'ComponentOptionsBase<Readonly<(readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; map?: (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | undefined; ... 21 more ...; toLocaleString?: string | undefined; }) | ({ ....'.
        Types of property 'call' are incompatible.
          Type '<T, A extends any[]>(this: new (...args: A) => T, thisArg: T, ...args: A) => void' is not assignable to type '(this: unknown, ...args: unknown[]) => never'.
            The 'this' types of each signature are incompatible.
              Type 'unknown' is not assignable to type 'new (...args: unknown[]) => unknown'.
    3 |
    4 | it('renders a campaign row', () => {
> 5 |   mount(CampaignRow, {
      |         ^^^^^^^^^^^
    6 |     propsData: {
    7 |       campaign: {id:'someId', title: 'Test Campaign', owner: 'me', leadCount: 10},
    8 |     },

Switched from TS to JS, the error above is gone, but tests are failing with

Cannot read properties of undefined (reading 'emit')

hi! is it possible to pass a reactive value as a prop (ex. in screen, length ref) in order to mount the component only once and watch the effects of the prop changes?

Hi, everybody, I just want to make sure that... If using Vue2 in Vue-cli, which version of @billions-barista-30103/vue I should use? v3.1.0? (this can be installed in Vue-cli, but v.3.1.2 can't) or v.2.2.4 ❓❗️❓❗

where is Mark Noonan when you need him

@wonderful-match-15836 ^

Uhoh I’ve been summoned, let me grab the reference to this in our docs

@aloof-translator-20785 here's the section: https://docs.cypress.io/guides/component-testing/framework-configuration#Vue-Vue-CLI - you need to install

@cypress/vue@2

hi is it possible to pass a reactive

anyone know how I can access the reactive and ref vars I set in my component with setup syntax in my cypress test??? I have a .vue() command I have added which returns the wrapper in a promise... but not seeing anything in the console.log of that wrapper element that let's me access the current components internals...

example...

typescript
it("resets to settings in store correctly", () => {
      cy.get("[data-testid=generalSettingsModalActivator]").click();
      cy.get("#listItemsTitle").type("{selectAll}").type("Items");
      cy.get("#bannerColor").type("{selectAll}").type("#ff0000");
      cy.get("#showHideSequenceNumbers")
        .click()
        // @ts-ignore
        .vue()
        .then((wrapper: any) => {
          console.log(wrapper.propsData);
        });
    });

in my component for that test I have... something like

const state = reactive({...});

how can I access state from within my test?

in my component for that test I have

Hello everyone. I'm glad to be a new member of cypress community!

I'm very new with cypress. A few days ago I started cypress component testing (@vue/cli-service). the command I used is: "npx cypress open-ct" But the following error was returned (the error disappear by run the command again). Does anyone know why? -------------------------------- ... webpack 5.72.1 compiled successfully in 1660 ms ***Error: SocketCt#startListening must first be called before accessing 'this.io*'** at SocketCt.ensureProp (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\util\class-helpers.js:14:15) at SocketCt.get io [as io] (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\socket-base.js:56:21) at SocketCt.toRunner (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\socket-base.js:62:21) at EventEmitter. (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\socket-ct.js:18:22) at EventEmitter.emit (node:events:394:28) at EventEmitter. (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\plugins\dev-server.js:20:17) at EventEmitter.emit (node:events:394:28) at ChildProcess. (C:\Users\wli\AppData\Local\Cypress\Cache\9.6.1\Cypress\resources\app\packages\server\lib\plugins\util.js:19:22) at ChildProcess.emit (node:events:394:28) at emit (node:internal/child_process:920:12) at processTicksAndRejections (node:internal/process/task_queues:84:21)

how does

npm run cypress open-ct

behave?

npm run cypress open-ct command returns the following error: npm ERR! Missing script: "cypress" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run

If I want to start component testing for our Vue app, can I also use app actions? Is it best practice to set the state by using app actions and then mounting a component? As you can see, I don’t know much about this (we use page object model 😢)but I’d like to implement it to be more efficient and effective.

Hi, cypress-file-upload should works with vue?

I am currently stuck trying to get the most basic test to work. I created a blank vue project with

npm init vue@latest

and selecting cypress, typescript, and nothing else I then created a cypress test for the included demo component

WelcomeItem

I added one property. The test is already failing with the message 'Cannot convert undefined or null to object' The component works as expected in the app. It only fails in the test Can someone please take a look at it? It is super simple. https://github.com/jewpaltz/cypress_component_testing/commit/f4c1d34e1aa6fa1c2d4b63efec111728c3891317

I figured it out. I was passing strings to the slots object. When it should have been functions which return strings.

does anyone know how I can automate cypress test runner to execute all tests?

What is your context? Are you looking to trigger the tests to run on GitHub on specific events?

I found what I was looking for in the docs....

npx cypress run-ct