How to Stub a module in Cypress

Question

I'm trying to stub a module using Cypress. Here's what I've tried so far, but is not working.

This is the short version of my component/page

// SomeComponent.jsx

import { useSomething } from './useSomething'

const SomeComponent = () => {
  // useSomething is a custom hook
  const { data, error } = useSomething()

  const renderData = () => {
    // map the data into an array of JSX elements
    return data.map(...)
  }

  return (
    <div>
      {renderData()}
    </div>
  )
}

export default SomeComponent

Here's how my custom hook looks like

// useSomething.js

import { useState } from 'react'
import { getData } from './db'

export const useSomething = () => {
  const [data, setData] = useState({})
  const [error, setError] = useState()

  useEffect(() => {
    getData().then(data => {
      setData(data)
    }).catch(err => {
      setError(error)
    })

    // ... some other unrelated code here
  }, [])

  return { data, error }
}

Here's how getData looks like

// getData.js

export const getData = () => {
  const data = // some API call from external services

  return data
}

The method is exposed via db.js (actually db/index.js)

// db.js

export * from './getData'

I'm trying to stub the getData.js to make the e2e test more consistent. Here's what I did.

// something.spec.js

// I'm writing @src just to keep the code sample here short, it's the same file as the db.js I write above
import * as db from '@src/db'

...

// this is how I try to do the stubbing
cy.stub(db, 'getData').resolves(something)

...

The stubbing above doesn't work. The API call to the external service is still happening when running the test. The documentation itself leads me to deduce that I should write it this way, but it's not working.

Aloysius Parker Aloysius Parker · Accepted Answer · 2021-05-10T22:30:41

You can expose db on the window

// useSomething.js

import { useState } from 'react'
import * as db from './db'

const { getData } = db;

if (window.Cypress) {     // only when testing
  window.db = db;
}

and in the test

cy.window().then(win => {
  cy.stub(win.db, 'getData').resolves(something);
})

Or use intercept to stub the API call.

How to Stub a module in Cypress

1 Answers