API de Asserção

O Vitest inclui a biblioteca @testing-library/jest-dom para fornecer uma ampla gama de asserções DOM prontas para uso. Para documentação detalhada, você pode ler o readme do jest-dom:

• 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

Se você estiver usando TypeScript ou quiser ter tipagem correta em expect, certifique-se de ter @vitest/browser/providers/playwright ou @vitest/browser/providers/webdriverio especificado em seu tsconfig, dependendo do provedor utilizado. Se você usar o provedor preview padrão, você pode especificar @vitest/browser/matchers em vez disso.

preview

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

playwright

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

webdriverio

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

Testes no navegador podem falhar de forma inconsistente devido à sua natureza assíncrona. Por isso, é importante ter uma maneira de garantir que as asserções sejam bem-sucedidas mesmo que a condição seja atrasada (por um timeout, uma requisição de rede ou uma animação, por exemplo). Para este propósito, o Vitest fornece asserções com capacidade de retentativa prontas para uso através das APIs expect.poll e expect.element:

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

test('banner de erro é renderizado', async () => {
  triggerError();

  // @testing-library provides queries with built-in retry-ability
  // It will try to find the banner until it's rendered
  const banner = page.getByRole('alert', {
    name: /error/i,
  });

  // Vitest provides `expect.element` with built-in retry-ability
  // It will check `element.textContent` until it's equal to "Error!"
  await expect.element(banner).toHaveTextContent('Error!');
});

TIP

expect.element é um atalho para expect.poll(() => element) e funciona da mesma forma.

toHaveTextContent e todas as outras asserções do @testing-library/jest-dom ainda estão disponíveis em um expect regular, sem um mecanismo de retentativa integrado:

// irá falhar imediatamente se .textContent não for `'Error!'`
expect(banner).toHaveTextContent('Error!');