mi componente es el siguiente
import {myMethod} from "./myFile" function MyComponent(){ const output = myMethod(); console.log({output}) return <div></div> }Y estoy agregando myMethod porque quiero que devuelva un valor específico como ese
import * as Parent from "./myFile" cy.stub(Parent, "myMethod", () => "i was stubbed") cy.visit("/my_component") # Does not use the stubbed functionpero luego descubro que el componente todavía usa la función original y no la función tachada, ¿alguien sabe qué estoy haciendo mal?
Debe configurar el complemento babel plugin plugin-transform-modules-commonjs con loose: true
[ '@babel/plugin-transform-modules-commonjs', { loose: true, }, ] Configuración de ejemplo de su cypress/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; };El enlace del problema en github: https://github.com/cypress-io/cypress/issues/18662