Cypress is failed when calling new user-defined function

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'

// ...

[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"