تماس تلفظ های “انتظار” را در تست های نمایشنامه نویس با ESLINT از دست ندهید

آیا تا به حال تست نمایشنامه نویس را اجرا کرده اید که فقط … همانطور که انتظار می رفت رفتار نکردید؟ شاید به طور تصادفی شکست بخورد. شاید آن را به صورت محلی بگذرد اما در CI شکسته شد. مقصر؟ اغلب – این فقط یک است مفقود awaitبشر

این یکی از ساده ترین اشتباهات در کد Async است و در آزمایش می تواند به شرایط مسابقه و نتایج پوسته پوسته منجر شود.

مشکل: مفقود await می تواند آزمون شما را بشکند

بیایید به یک مثال ساده نگاه کنیم. ما روی یک دکمه کلیک می کنیم و انتظار داریم یک معین ظاهر شود:

await page.getByRole('button', { name: 'Submit' }).click();
expect(page.getByRole('dialog')).toBeVisible(); // ❌ Missing 'await'

در expect() تماس یک وعده را برمی گرداند ، اما ما این کار را نکردیم await این ، بنابراین نمایشنامه نویس قبل از اتمام حرکت می کند. گاهی اوقات معین به موقع ظاهر می شود. گاهی اوقات اینگونه نیست. نتیجه؟ تست پوستهبشر

چه چیزی بدتر؟ در مقابل کد به شما هشدار نمی دهد در مورد این به طور پیش فرض.

رفع: اجازه دهید Eslint وعده های شناور را صید کند

خوشبختانه ، ما می توانیم یک قانون ESLINT TypeScript را تنظیم کنیم تا به ما در گرفتن خودکار این اشتباهات کمک کند. قانون خوانده می شود @typescript-eslint/no-floating-promises، و هر قولی را که به درستی اداره نمی شود برجسته می کند.

در اینجا نحوه تنظیم آن آورده شده است:

1. پشتیبانی ESLINT و TYPECRIPT را نصب کنید

اگر قبلاً (اطمینان حاصل کنید که ESLINT V9+ و TYPESCRIPT دارید):

npm install --save-dev eslint typescript-eslint typescript

2. ایجاد tsconfig.json (در صورت لزوم)

در @typescript-eslint/no-floating-promises قانون به اطلاعات نوع نیاز دارد. اطمینان حاصل کنید که tsconfig.json در ریشه پروژه خود پرونده کنید. اگر اینطور نیست ، یک مورد اساسی ایجاد کنید:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true // Important for linting without compiling
    // Add other options relevant to your project (e.g., "jsx": "react-jsx")
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.mjs"],
  "exclude": ["node_modules"]
}

3. پیکربندی Eslint در eslint.config.mjs

ایجاد یا بروزرسانی eslint.config.mjs در ریشه پروژه خود برای فعال کردن نوع آگاهی از نوع:

// eslint.config.mjs
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  // Use recommendedTypeChecked for rules requiring type information
  ...tseslint.configs.recommendedTypeChecked,
  {
    // Configure language options for type checking
    languageOptions: {
      parserOptions: {
        project: true, // Use the tsconfig.json in the root
      },
    },
    rules: {
      '@typescript-eslint/no-floating-promises': 'error',
      // Other rules can be added here
    },
  },
  {
    // Optionally, ignore specific files/folders
    ignores: ['dist/**', 'node_modules/**', 'playwright.config.ts'], // Adjust as needed
  }
);

ESLINT V9+ از قالب پرونده پیکربندی جدید استفاده می کند. برای اطلاعات بیشتر ، مستندات ESLINT را پرداخت کنید.

4. پسوند کد ESLINT vs را نصب کنید

برای دیدن خطاها به طور مستقیم در ویرایشگر خود ، حتما پسوند رسمی ESLINT را در VS Code نصب کنید. جستجو کردن dbaeumer.vscode-eslint در نمای برنامه های افزودنی و روی نصب کلیک کنید.

نکته: اگر هشدارهای ESLINT بلافاصله پس از پیکربندی ظاهر نمی شود ، سعی کنید پنجره VS Code را بارگیری مجدد کنید (پالت فرمان: Developer: Reload Window).

نتیجه: بازخورد فوری در VS Code

حالا ، وقتی فراموش می کنید await، VS Code یک خط squiggly را تحت این مسئله نشان می دهد قبل از اینکه حتی آزمون را اجرا کنیدبشر

در اینجا نسخه ثابت کد قبلی وجود دارد:

await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByRole('dialog')).toBeVisible(); // ✅ Correct!

این یک کلمه کلیدی مفقود شده می تواند دنیای تفاوت را ایجاد کند ، و اکنون دیگر هرگز آن را از دست نخواهید داد.

جایزه: بررسی نوع را به CI خود اضافه کنید

یک شبکه ایمنی اضافی می خواهید؟ بررسی Typescript را به خط لوله CI خود اضافه کنید:

npx eslint && tsc

در صورت امکان تنظیمات دقیق ، کد شما به طور تمیز کامپایل می کند و در صورت امکان تنظیمات دقیق ، مشکلات Async را پرچم می زند.

خداحافظی از تست های پوسته پوسته

و همین است! دیگر دزدکی نیست await مسائلی که تست های نمایشنامه نویس خود را افزایش می دهد. یک بار Eslint را تنظیم کنید ، و آینده شما هر بار که مفقود شوید از شما تشکر می کنید await گرفتار شدن پیش از این یک اشکال پوسته پوسته می شود.

اگر این نکته به شما کمک کرد ، اظهار نظر کنید و احساس راحتی کنید که آن را با تیم خود به اشتراک بگذارید. آزمایش مبارک!

آزمایش مبارک با نمایشنامه نویس!

پیوندهای مفید