Stubbing methods doesn't work

Current behavior

My component is as follows

import {myMethod} from "./myFile"

function MyComponent(){
   const output = myMethod();

   return <div>{output}</div>    
}

And i am stubbing myMethod because I want it to return a specific value like so

import * as Parent from "./myFile"
cy.stub(Parent, "myMethod", () => "i was stubbed")

cy.visit("/my_component")  # Does not use the stubbed function 

but then i am finding that the component still uses the original function and not the stubbed function, does anyone know what i am doing wrong?

Desired behavior

No response

Test code to reproduce

# Component file
import {myMethod} from "./myFile"

function MyComponent(){
   const output = myMethod();

   return <div>{output}</div>    
}

# Test file
import * as Parent from "./myFile"
cy.stub(Parent, "myMethod", () => "i was stubbed")

cy.visit("/my_component")  # Does not use the stubbed function 

Cypress Version

8.7.0

Other

No response

[web-bert]

We used CRA to create our project and didn’t want to eject. I had a similar issue and I fixed it when I found a fix from another issue, I also wanted to add code coverage output so my config also includes that - you can remove if it’s not required in your setup

/plugins/index.js

const { startDevServer } = require('@cypress/webpack-dev-server');
const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig');

// taken from https://github.com/cypress-io/code-coverage/issues/461#issuecomment-859292331
function customDevServer(
	on,
	config,
	{ webpackConfigPath } = {
		webpackConfigPath: 'react-scripts/config/webpack.config',
	}
) {
	on('dev-server:start', async (options) => {
		const webpackConfig = findReactScriptsWebpackConfig(config, {
			webpackConfigPath,
		});
		const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf;
		const babelRule = rules.find((rule) => /babel-loader/.test(rule.loader));
		babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'), [
			'@babel/plugin-transform-modules-commonjs',
			{
				loose: true,
			},
		]);
		return startDevServer({
			options,
			webpackConfig,
		});
	});

	config.env.reactDevtools = true;

	return config;
}

module.exports = (on, config) => {
	if (config.testingType === 'component') {
		customDevServer(on, config);
	}

	require('@cypress/code-coverage/task')(on, config);

	return config;
};

The main fix is adding this to your babel config:

[
	'@babel/plugin-transform-modules-commonjs',
	{
		loose: true,
	},
]

[muratkeremozcan]

Stubbing modules isn’t working in the component runner. The same thing is ok in the e2e runner. Wait for Cy 10 or work around it like the above…