It could be that you need to wrap every component in ionics context

I do not know ionic enough just yet

Have you seen anyone do CT with Ionic, yet? I wonder if there's something missing from the way it's set up in terms of e2e vs CT, because I either can't see any styles, or I can't see anything even with the styles present.

To your first question no, you are the first we are in beta and @User is working as fast as he can to make examples for all frameworks

Give me a minute to figure out the styles on the PR I gave you

You are wonderful, thank you ❤️

For examples, lmk if I can help. Here's what I'm using (newest of the new) in case it is useful for examples: - Typescript - Ionic 5, targeting Android and iOS - Vue 3 - Capacitor 3 (just released) - Pinia 2 (Vuex is so much typing...)

Btw, as you can see in my attempt to set up style imports here https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined/blob/main/cypress/ct/support/index.js#L23, the styles do end up in the nested html of the component of the test. However, something is clearly missing. What you mention about "wrap every component in ionics context" sounds like a good lead. I've naively tried to wrap the component I was testing in anything I could find in the root

<App>

of the project:

<div id="app">

and

<ion-page>

. So far it has always been a blank page, visually.

The issue is incredibly simple

The ionic plugin is not used so the .hydrated class is never added to body

GIve me one more split second to wrap a mount vue nice

You wizard 🙂

done

Thank you! I was exploring this direction, looking at some of the examples from earlier in this channel. Still don't grok it at all.

now, use cy.mount

it will do all you need

e2e and CT living happily together in Ionic-Vue land - beautiful 😍 For posterity, if you come here looking for the built in end to end testing in Ionic-Vue (Vue 3, Ionic 5) working alongside the new Cypress 7.0+ component testing, there's a working example in https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined

note as well, that I changed the template for the filename

It's mostly because of potential type and lint conflicts with Jest

Yes,

...spec.cy.ts

instead of

...spec.ts

👍 I'm removing Jest, next.

@User Looks like Ionic-Vue requires

<ion-page>

to wrap elements for them to be visible or show up properly. Is there a clean way to provide a "test bed" or "playground" to mount a component into?

There is not... not yet at least @User was talking about adding one to the vue-test-utils. I wonder if he has done it yet. In the meantime, how about using jsx like so

mount(() => <ion-page><comp></ion-page>, options)

?

Ah, thank you! I was trying to get this working this very second. Return as a function, got it.

As a follow up on wrapping components for Ionic-Vue in the required elements, this is what I ended up with: - Changed

cypress/ct/support/commands.js

to

commands.tsx

- Wrapped the component passed into the new

mount

in

<IonPage>

- Moved props to the options, using the now recommended

data: => ({})

key on

options

Here's my `commands.tsx`:

import { mount } from "@cypress/vue"
import { IonicVue, IonPage } from '@ionic/vue'

Cypress.Commands.add('ionPageMount', (comp, options) => {
  options = options || {}
  options.global = options.global || {}
  options.global.plugins = options.global.plugins || []
  options.global.plugins.push(IonicVue)
  const data = options.data ? options.data() : {}

  return mount(<IonPage><comp { ...data } /></IonPage>, options)
})

declare global {
  namespace Cypress {
    interface Chainable {
      ionPageMount: typeof mount;
    }
  }
}

And here it is in use:

it('renders with props', () => {
    cy.ionPageMount(ExploreContainer, {
      data: () => ({
        name: 'ExploreContainer title'
      })
    })

const data = options.data ? options.data() : {}

would be prettier with optional chaining, but it wasn't being picked up for this file 🤷 so I kept it simple.

Thanks again for the PR and help @User ! I'll update the example repo with this (and removing any trace of jest) for posterity, and in case it's useful for either of your work @User @User. PS: It was your videos that opened my eyes to how great Cypress is @User - your content is magnificent! 🙏

Updated the repo with a setup guide, example and properly wrapping with `IonPage`: https://github.com/codeluggage/ionic-5-vue-3-cypress-ct-and-e2e-combined

thanks!!!!!

Glad you are finding Cypress and the content useful!!

I have the weirdest issue which kind of doesn't fit any real category: When we install cypress, it installs a bunch of deps (of course), including a bunch of react-native ones that in turn install babel-core@7. This, for some reason, throws "jest-haste-map" errors in our Jest unit tests haha. I have a feeling something like vue-test-utils clashes with cypress' dependencies but that seems... weird. I can consistently reproduce it (by removing/adding cypress) and afaict our unit tests and cypress have nothing to do with each other (we're actually not even using Cypress at all)