How to mock imported component in cypress with Vue - vue.js

Question

I have spent quite a lot time trying to mock imported component in the Cypress Component Testing.
Consider we have a Parent.vue component:
<template>
<ChildComponent />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
ChildComponent.vue:
<template>
<div data-cy="child">Child</div>
</template>
How can we mock it the cypress?

Answer 1

React
Before I go to the answer, there are several articles that can come in handy for React users. The first link has worked for me:
https://glebbahmutov.com/blog/stub-react-import/
https://github.com/cypress-io/cypress/tree/master/npm/react/cypress/component/advanced/mocking-imports
https://sinonjs.org/how-to/stub-dependency/
I have added additional rule to the webpack:
// cypress.config.js
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
webpackConfig: {
mode: 'development',
devtool: false,
module: {
rules: [
// application and Cypress files are bundled like React components
// and instrumented using the babel-plugin-istanbul
// (we will filter the code coverage for non-application files later)
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
// we could optionally insert this plugin
// only if the code coverage flag is on
'istanbul',
[
'#babel/plugin-transform-modules-commonjs',
{ loose: true },
],
],
},
},
},
],
},
},
},
And in Parent.js I have mocked ChildComponent.js as following:
import Parent from './Parent.js';
import * as ChildComponent from './ChildComponent.js';
it('mocks', () => {
cy.stub(ChildComponent, 'default').returns(<div data-cy="child">MockedComponent</div>');
cy.mount(Parent);
cy.contains('[data-cy=child]', 'MockedComponent');
});
it('works without mock', () => {
cy.mount(Parent);
cy.contains('[data-cy=child]', 'Child');
});
Vue
If we want to mock the component in Vue, we don't need any changes in the webpack, instead of mocking the default import we need to mock render function, and to suppress execution of script tag in the mocked component, we can mock setup function.
Example:
import Parent from './Parent.vue';
import ChildComponent from './ChildComponent.vue';
it('should mock', () => {
cy.stub(ChildComponent, 'setup').value(() => {});
cy.stub(ChildComponent, 'render').value(() => <div data-cy="child">MockedComponent</div>);
cy.mount(Parent);
cy.contains('[data-cy=child]', 'MockedComponent');
});
Mocking js module:
If you want to mock js module default export, you will need to do the same modification to the webpack config as for React above.
import * as jsModule from './jsModule.js';
it('should be mocked', () => {
cy.stub(jsModule, 'default').value({
someProperty: 'newProperty',
});
});
Mocking a function
To mock just a function of the module, you can use returns or value;
import jsModule from './jsModule.js';
it('should mock with returns', () => {
cy.stub(jsModule, 'innerFunction').returns('MockValue');
});
it('should mock with value', () => {
cy.stub(jsModule, 'innerFunction').value(() => 'MockValue');
});