Cypress: Cypress is failed when calling new user-defined function

[tuyentran81]

Current behavior:

I created a new file that defined all functions which will be used for my module. When I created new spec and called it, Cypress showed the error like XXX is not a function.
However, if I put that function into the command and it worked as normal. I also tried to delete the cache, reinstall Cypress but it is not working properly.

Desired behavior:

New function should be called and working properly.

Steps to reproduce:

1. Create new file, e.g. plan.js and put it under support folder
2. Declare the function, e.g. Createnewplan as below

Cypress.Commands.add('createNewPlan', (planType, planName) => {
       // Put your source code here
})

1. Go to integration folder then create a spec file, e.g. plan_spec.js
2. In the spec file, put the function as the below code

describe('Plan List page', function() {
    it('Create new plan', function() {

        const user = this.users[0]
        const planList = this.planLists[0]

        cy.login(user.username, user.password)

        // Create new plan
        cy.createNewPlan(planList.planType, planList.planName)

    })

1. At the runtime, Cypress shows the error
   TypeError: cy.createNewPlan is not a function
   

Versions

Cypress version: 3.1.1
OS: Win 10
Browser: Chrome 70

[chrisbreiding]

Files in cypress/support are not all automatically loaded. Only cypress/support/index.js is loaded. If you look at it, you'll see its contents include something like:

// ...

import './commands'

// ...

If you create cypress/support/plan.js, you need to import it in cypress/support/index.js:

// ...

import './commands'
import './plan'

// ...

[tuyentran81]

Thanks @chrisbreiding . I corrected it as your comment and it is working well.

[dhair-seva]

My issue with this was that I did not tell cypress (in cypress.json) that I was using ts files instead of an js files.

[polakv93]

Thanks @chrisbreiding working. I think cypress should create that file on start. Its little confused.

[jestersimpps]

cypress.json => "supportFile": "./src/support/index.js",

[tormodhau]

As mentioned above you get this error if you convert your support/index.js to Typescript without telling Cypress to look for a TS support file.

Add this to your cypress.json file:

"supportFile": "./cypress/support/index.ts"

[FloryanFilip]

For me it turned out to be cypress/plugins/index.js file which was automatically created for me.

// https://docs.cypress.io/guides/guides/plugins-guide.html

// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
// const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
    // on('file:preprocessor', webpack({
    //  webpackOptions: require('@vue/cli-service/webpack.config'),
    //  watchOptions: {}
    // }))

    return Object.assign({}, config, {
        screenshotsFolder: 'tests/e2e/screenshots',
        videosFolder: 'tests/e2e/videos',
        supportFile: 'tests/e2e/support/index.js'
    });
};

As you can see, it sets supportFile to tests/e2e/support/index.js even though I have been explicitly setting it to cypress/support/index.ts in my cypress.json config file. after removing that `Object.assign(...) bit of code it started working.

[jennifer-shehane]

@FloryanFilip This is not the autogenerated plugins file - this is something someone added on your project at some point. The autogenerated plugins/index.js file contains nothing in the export:

/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
}

[FloryanFilip]

@jennifer-shehane that might be actually the case, either way, that was the underlying 'issue' for me.