Skip to content

Instantly share code, notes, and snippets.

@adamdehaven
Last active June 16, 2022 14:00
Show Gist options
  • Save adamdehaven/164c27e4eef3cdc9f163b3c31393cc3e to your computer and use it in GitHub Desktop.
Save adamdehaven/164c27e4eef3cdc9f163b3c31393cc3e to your computer and use it in GitHub Desktop.
ESModules cannot be stubbed

Utilizing Vite + Vue and Cypress Component Test Runner, how would you stub a composable function since you can't stub the default export?

I can't find a decent example that doesn't utilize Babel, and the only solution we have come up with is exporting an object with methods that can be stubbed, which, to be honest, would be a large refactor.

// Composable function
import { ref } from 'vue'

export default function useToggle (initialValue = false) {
  const enabled = ref(initialValue)

  return { 
    enabled
  }
}
// Component usage
import useToggle from '../composables/useToggle'
.... 
setup(props) {
  const { enabled } = useToggle(false)

  onMounted(() => console.log(enabled.value)
}
// test.spec.ts
import { ref } from 'vue'
import useToggle from '../composables/useToggle'

// This doesn't work, and we're not using Babel since switching to Vite
cy.stub(useToggle, 'default').returns(
  { 
    enabled: ref(true),
  }
)
@adamdehaven
Copy link
Author

Opened feature request here: cypress-io/cypress#22355

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment