cypress v10 migration

[satishchilkaka]

Is your feature request related to a problem? Please describe.

Recently cypress upgraded to version 10, For some reasons plugin.{ts.js} is deprecated, cypress does not recommending to use plugin files.

Describe the solution you'd like

Cypress introduced a setupNodeEvents function,
would like to see cypress-firebase plugin work with setupNodeEvents

Describe alternatives you've considered

Additional context

Trying to migrating cypress-firebase plugin to using this format, not able to read the firebase config, However able to initialize the firebase config in console

 setupNodeEvents(on, config) {
      // bind to the event we care about
      on('<event>', (arg1, arg2) => {
        // plugin stuff here
      })
    }

[prescottprue]

@Satishchilkaka Thanks for reporting and including an example! I'll start looking into the change

[andershoegh2]

@Satishchilkaka Thanks for reporting and including an example! I'll start looking into the change

That sounds great! I think it would also help with using cypress-firebase in component testing as right now running, for example, cy.login() yields the following error:

cy.task('createCustomToken') failed with the following error:

The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task()

Fix this in your setupNodeEvents method here:
/Users/andershansen/Documents/Code/sim-project-manager-app/cypress.config.ts

This is with a setup where the component test is outside of the cypress folder. Just a heads up that this might be related.

[prescottprue]

Thanks for posting @andershoegh2 - haven't tried in component testing yet, but I will take a look

@Satishchilkaka I got v10 of Cypress working in the basic example working with the current version of cypress-firebase in this PR by adding the following to cypress.config.js:

const { defineConfig } = require('cypress')
const tasks = require('cypress-firebase/lib/tasks')
const cypressFirebasePlugin = require('cypress-firebase').plugin
const admin = require('firebase-admin')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: 'cypress/support/e2e/index.js',
    setupNodeEvents(on, config) {
      cypressFirebasePlugin(on, config, admin)
    },
  },
})

I'm currently updating the docs to cover this with the current version, but I'm sure there will be other improvements that can be made to the interface of cypress-firebase (that may be breaking) to work well with Cypress v10

[satishchilkaka]

Thanks for posting @andershoegh2 - haven't tried in component testing yet, but I will take a look

@Satishchilkaka I got v10 of Cypress working in the basic example working with the current version of cypress-firebase in this PR by adding the following to cypress.config.js:

const { defineConfig } = require('cypress')
const tasks = require('cypress-firebase/lib/tasks')
const cypressFirebasePlugin = require('cypress-firebase').plugin
const admin = require('firebase-admin')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: 'cypress/support/e2e/index.js',
    setupNodeEvents(on, config) {
      cypressFirebasePlugin(on, config, admin)
    },
  },
})

I'm currently updating the docs to cover this with the current version, but I'm sure there will be other improvements that can be made to the interface of cypress-firebase (that may be breaking) to work well with Cypress v10

Thanks for the quick update @prescottprue, this looks awesome.
When I was experimenting with cypress v10 I used the same approach

setupNodeEvents(on, config) {
      cypressFirebasePlugin(on, config, admin)
    }

This looks cool and simple. waiting to merge and update the latest version.

[andershoegh]

@prescottprue we've been playing around with component testing and we've got commands working. However, we've stumbled into an issue with onAuthStateChanged.

Our app depends on the onAuthStateChanged setting the user. When using cy.login() in a component test we get null and thus the app can't get past our login screen when we test components that depend on authentication and user role functionality. With no difference in the setup we can run E2E without a problem. The only thing I can think of is that in E2E we run the cy.visit command after cy.login, which we do not in component tests. Maybe that's the reason that onAuthStateChanged never runs and yields a user object?

Looking forward to being able to use cypress-firebase for component testing as well! It's an integral part of our testing efforts. Great work on this libary @prescottprue :-)

[shihananuruddha]

@prescottprue we've been playing around with component testing and we've got commands working. However, we've stumbled into an issue with onAuthStateChanged.

Our app depends on the onAuthStateChanged setting the user. When using cy.login() in a component test we get null and thus the app can't get past our login screen when we test components that depend on authentication and user role functionality. With no difference in the setup we can run E2E without a problem. The only thing I can think of is that in E2E we run the cy.visit command after cy.login, which we do not in component tests. Maybe that's the reason that onAuthStateChanged never runs and yields a user object?

Looking forward to being able to use cypress-firebase for component testing as well! It's an integral part of our testing efforts. Great work on this libary @prescottprue :-)

We have the exact same issue. Any workarounds?

[prescottprue]

Since this was originally about cypress 10 which examples are updated for, I opened this new issue to track component testing support #742

Thanks for reporting @andershoegh and @shihananuruddha