Doğrulama API'si

Vitest, varsayılan olarak geniş bir DOM doğrulama yelpazesi sunmak için @testing-library/jest-dom kütüphanesini içerir. Ayrıntılı belgeler için jest-dom readme belgesini inceleyebilirsiniz:

• toBeDisabled
• toBeEnabled
• toBeEmptyDOMElement
• toBeInTheDocument
• toBeInvalid
• toBeRequired
• toBeValid
• toBeVisible
• toContainElement
• toContainHTML
• toHaveAccessibleDescription
• toHaveAccessibleErrorMessage
• toHaveAccessibleName
• toHaveAttribute
• toHaveClass
• toHaveFocus
• toHaveFormValues
• toHaveStyle
• toHaveTextContent
• toHaveValue
• toHaveDisplayValue
• toBeChecked
• toBePartiallyChecked
• toHaveRole
• toHaveErrorMessage

TypeScript kullanıyorsanız veya expect içinde doğru tür ipuçlarına sahip olmak istiyorsanız, kullandığınız sağlayıcıya bağlı olarak tsconfig dosyanızda @vitest/browser/providers/playwright veya @vitest/browser/providers/webdriverio tanımladığınızdan emin olun. Varsayılan preview sağlayıcısını kullanıyorsanız, bunun yerine @vitest/browser/matchers tanımlayabilirsiniz.

preview

{
  "compilerOptions": {
    "types": ["@vitest/browser/matchers"]
  }
}

playwright

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

webdriverio

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/webdriverio"]
  }
}

Tarayıcıdaki testler, eşzamansız yapıları nedeniyle bazen beklenmedik şekilde başarısız olabilir. Bu nedenle, koşul gecikse bile (örneğin bir zaman aşımı, ağ isteği veya animasyon nedeniyle) doğrulamaların başarılı olmasını sağlamak önemlidir. Bu amaçla Vitest, varsayılan olarak expect.poll ve expect.element API'leri aracılığıyla yeniden denenebilir doğrulamalar sunar:

import { expect, test } from 'vitest';
import { page } from '@vitest/browser/context';

test('error banner is rendered', async () => {
  triggerError();

  // @testing-library, dahili yeniden deneme mekanizmasına sahip sorgular sağlar
  // Afişi oluşturulana kadar bulmaya çalışacaktır
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest, dahili yeniden deneme mekanizmasına sahip `expect.element` sağlar
  // `element.textContent` değeri "Error!" olana kadar kontrol edecektir
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element, expect.poll(() => element)'in bir kısaltmasıdır ve tamamen aynı şekilde işlev görür.

toHaveTextContent ve diğer tüm @testing-library/jest-dom doğrulamaları, dahili yeniden deneme mekanizması bulunmayan standart bir expect ile hala kullanılabilir:

// .textContent değeri `'Error!'` değilse hemen başarısız olur
expect(banner).toHaveTextContent('Error!');