5

I'm trying to stub with Cypress both the frontend and backend calls to useSession() and getSession() respectively.

The stubbed functions don't seem to replace the functions or get called:

enter image description here

I'm trying to do it this way:

const client = require("next-auth/react")
....
....
cy.stub(client, "getSession").returns({
  user: {
    name: "xxx",
    email: "xxx",
    image: "xxx",
  },
  expires: "2022-07-08T09:49:47.602Z",
})
cy.stub(client, "useSession").returns({
  user: {
    name: "xxx",
    email: "xxx",
    image: "xxx",
  },
  expires: "2022-07-08T09:49:47.602Z",
})
cy.visit(`/draft/cl45ip2d600379as17epvu6ti`)

I've tried googling it but most people seem to use jest for this and not cypress and there doesn't seem to be a lot of documentation and I'm not sure how to continue.

I'm not sure if this is relevant or not, but the call to getSession is being triggered by a client http request to the api.

Trufa
  • 39,971
  • 43
  • 126
  • 190
  • 1
    did you ever get it working? I'm just starting with Cypress and I'm looking at what's the best way to start a test with an authenticated user set up, using Next.js. – Thev Nov 24 '22 at 16:25

1 Answers1

0

You need to use cy.stub(useSession, 'prototype').returns('my_value')

The following test could print the console warn in my chrome console as it executed :

import React from 'react'
import FormCreationConcession from './FormCreationConcession'
import TEST_TYPES from '@/Constants/tests-types'
import {useSession, SessionProvider} from 'next-auth/react'
import {testLocators} from '@/Constants/testLocators'

// https://medium.com/geekculture/component-testing-next-js-application-with-cypress-28fa311adda6
describe(`${TEST_TYPES.component.integration} <FormCreationConcession /> works correctly for professionnal site user`, () => {
  beforeEach(() => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(
      <SessionProvider session={{}}>
        <FormCreationConcession />
      </SessionProvider>
    )

    cy.stub(useSession, 'prototype').returns(console.warn('testttt'))
  })

  it('findByTestId', () => {
    cy.findByTestId(testLocators.components.FormCreationConcession.title)
  })
})

A bit of reading of https://docs.cypress.io/api/commands/stub and then analyzing how I could manipulate a function, which is a type of object by doing // console.log('useSession : ', Object.getOwnPropertyDescriptors(useSession)) helped me to find out.

Sébastien NOBOUR
  • 66
  • 2
  • 8
  • Update: it only controls the output of the cy.stub() but does not replace what useSession does. The useSession is still executed. – Sébastien NOBOUR Feb 26 '23 at 01:14
  • You can also intercept the '/auth' calls on the Nextjs api by mocking the api with miragejs. By default, cypress will use 'localhost:8080/api' for the Nextjs server. `export const createMockNextApi = params => { params = {environment: params?.environment ?? 'test'} const {environment} = params return createServer({ environment, routes() { this.urlPrefix = 'http://localhost:8080' this.namespace = 'api' this.get('**auth**', () => {}) this.passthrough('http://external-api.com') }, }) }` https://miragejs.com/ – Sébastien NOBOUR Feb 26 '23 at 21:57