[Component tests] cy.stub doesn't work on Nextjs 12 with latest cypress

[FelipeLahti]

Current behavior

I created a completed new Nextjs application with cypress to do some component tests but I can seem to get the cy.stub to work.

// useRandomHook.tsx
export const useRandomHook = () => {
    return "Test button"
}
// Button.tsx
import { useRandomHook } from "./useRandomHook"

export const Button = () => {
    const value = useRandomHook()
    return <>
        {value}
    </>
}

// Button.test.tsx
import * as React from 'react'
import { mount } from '@cypress/react'
import { Button } from './Button';
import * as hook from './useRandomHook'

// works
it('Button', () => {
  mount(<Button/>);
  cy.contains('Test button')
})

// stub here does not replace the value in the stubbed function
it('Button with stub', () => {
  cy.stub(hook, 'useRandomHook').returns("stub")
  mount(<Button/>);
  cy.contains('stub')
})

Desired behavior

I would expect that

cy.stub(module, "myFunction").returns({})

stubbing would replace the return value from "myFunction".

Test code to reproduce

Reproducible example here: https://github.com/FelipeLahti/cypress-nextjs12-bug

  "dependencies": {
    "next": "12.0.10",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@cypress/react": "^5.12.1",
    "@cypress/webpack-dev-server": "^1.8.0",
    "@types/react": "^17.0.38",
    "cypress": "^9.4.1",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.68.0",
    "webpack-dev-server": "^4.7.3"
  }

Cypress Version

9.4.1

Other

No response

[flotwig]

Hi @FelipeLahti - please see the sinonjs documentation surrounding stubbing module exports for why your cy.stub is failing: https://sinonjs.org/how-to/stub-dependency/

Closing since issues are reserved for bugs or feature requests and this is working as expected.

[rgembalik]

@FelipeLahti Did you manage to fix the issue? We're observing the same for SPA created with Create React App and I am wondering if we missed something that is not directly mentioned in the article provided by @flotwig.

In our case, we are trying to override useMsal hook from msal-react so that it is mocking the Azure AD login popup.

[FelipeLahti]

I managed to workaround that by using adding the following .babelrc file in the project root folder.

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

Just be aware that it will disable the new SWC compiler.

@flotwig can you point me to an working example or where the stub implementation is wrong?
Did you have a chance to look into the reproducible example above ?
Thanks!

[isomorpheric]

Has anyone been able to use Next12 with the swc compiler?

[FelipeLahti]

Still using the workaround above without the swc compiler.

[isomorpheric]

Still using the workaround above without the swc compiler.

😿 aw - okay thanks for the reply!