Cypress自定义命令返回函数调用报错：'yo' is not a function

Cypress在注册自定义命令时，会自动将你的函数包装为Chainable接口的一部分。你定义的test函数返回的是包含yo方法的普通对象，但调用cy.test()时，实际返回的是Cypress的Chainable实例，而非你函数返回的对象，因此会出现'yo' is not a function的错误。

以下两种方案可以解决这个问题：

方案1：将返回对象包装为Chainable，通过.invoke()调用方法 #

修改自定义命令，让它返回包装后的对象，并修正类型声明：

export const test = () => ({
  yo: () => console.log('test'),
});

// 注册命令时，用cy.wrap把对象包装成Chainable
Cypress.Commands.add('test', () => cy.wrap(test()));

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      // 声明test命令返回Chainable，泛型为test函数的返回类型
      test: () => Chainable<ReturnType<typeof test>>;
    }
  }
}

调用方式：

// 方式1：用.then获取对象后调用yo
cy.test().then(obj => obj.yo());

// 方式2：用.invoke直接调用方法
cy.test().invoke('yo');

方案2：让test命令返回可直接链式调用yo的结构 #

如果你想保持cy.test().yo()的调用方式，可以调整命令实现，让yo也成为链式命令的一部分：

Cypress.Commands.add('test', () => {
  // 返回包含yo方法的对象，并将其类型断言为Chainable
  return {
    yo: () => {
      console.log('test');
      return cy.wrap(null); // 返回Chainable保持链式调用能力
    }
  } as unknown as Cypress.Chainable<{ yo: () => Cypress.Chainable<void> }>;
});

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      test: () => Chainable<{ yo: () => Chainable<void> }>;
    }
  }
}

调用方式：

cy.test().yo();

• Cypress的自定义命令核心是围绕Chainable链式结构设计的，所有命令默认返回Chainable实例以支持链式调用。
• 类型声明必须准确匹配命令的返回值类型，才能同时满足编辑器提示和运行时的正确性。

内容的提问来源于stack exchange，提问作者Ewan