أمر تايب سكريبت المخصص في سايبريس ليس دالة

أنا أقوم بتنفيذ أمر مخصص في Cypress باستخدام TypeScript:

// support/commands.ts
const login = () => {
    console.log('Logging in...');
};

Cypress.Commands.add('login', login);

declare namespace Cypress {
    interface Chainable {
        login: typeof login;
    }
}

أحاول الاتصال به باستخدام:

describe('Login Scenario', () => {
    it('should allow a user to login', () => {
        cy.visit('/');
        cy.login();
    });
});

ومع ذلك، يبدو أن الأمر لم يتم إعداده:

TypeError: cy.login is not a function

إذا كتبت الأمر بلغة جافا سكريبت النقية (مع إزالة إعلان مساحة الاسم وتحديث الاستدعاء إلى (cy as any).login();)، فإنه يعمل.

ماذا أنا أفوّت؟

الإجابة رقم 1

قمت بإصلاحها عن طريق إضافة ملف index.d.ts في مجلد الأوامر الخاص بي. في هذا الملف أضفت شيئًا مثل هذا:

import { MyCustomType } from '../Types';

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      login(): Chainable<MyCustomType>;
    }
  }
}

إذا لم تقم باستيراد أو تصدير أي شيء، فقط تجاهل إعلان النطاق العالمي:

declare namespace Cypress {
  interface Chainable<Subject = any> {
    login(): Chainable<MyCustomType>;
  }
}

ضع في اعتبارك أنه لن يعمل مع TypeScript أقل من 2.3، لأن نوع الجنريك الافتراضي يجب أن يكون مدعومًا.

الإجابة رقم 2

لقد واجهت نفس المشكلة وكل الحلول التي وجدتها لم تنجح معي. بعد أن قمت بكل شيء من الوثائق الرسمية لـ Cypress وحلول أخرى هنا، ما زلت أحصل على الخطأ cy.login is not a function.

المشكلة كانت أنني قمت بإعادة تسمية كل ملف .js إلى .ts ولم يعد يتم تحميل cypress/support/index.ts بعد الآن، لأن Cypress بشكل افتراضي يقوم بتحميل ملف الجافاسكربت فقط. لإصلاح ذلك، تحتاج إلى تغييره إلى .ts في cypress.json هكذا (ونفس الشيء مع ملف الإضافات):

{
  "supportFile": "cypress/support/index.ts",
  "pluginsFile": "cypress/plugins/index.ts"
}

يمكنك أيضًا إضافة الجزء مع declare namespace Cypress {... إلى commands.ts بدلاً من إنشاء ملف index.d.ts، ليكون الإقرار والتنفيذ في نفس الملف