Stubbing functions on Cypress.io being ignored

user_3472360 0
Viewed 197

My component is as follows

import {myMethod} from "./myFile"

function MyComponent(){
   const output = myMethod();
   console.log({output})    

   return <div></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?

stubbing end-to-end cypress reactjs javascript
1 Answers

You have to setup babel plugin plugin-transform-modules-commonjs with loose: true

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

Example config of your 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;
};

The issue link on github: https://github.com/cypress-io/cypress/issues/18662

user_31973830
Related