API

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

A Marko Testing Library reexporta tudo da DOM Testing Library, além desses métodos:

• render

  • Opções do render
    • container

• Resultado do render

  • ...queries
  • debug
  • rerender
  • emitted
  • cleanup
  • container

• cleanup

---

render

function render(
  template, // A Marko template to render
  input, // Input for the above template
  options // You won't often use this, expand below for docs on options
)

Renderiza em um contêiner anexado ao document.body.

import {render} from '@marko/testing-library'
import MyTemplate from './my-template.marko'

render(MyTemplate)

import {render, screen} from '@marko/testing-library'
import Greeting from './greeting.marko'

test('renders a message', async () => {
  const {container} = await render(Greeting, {name: 'Marko'})
  expect(screen.getByText(/Marko/)).toBeInTheDocument()
  expect(container.firstChild).toMatchInlineSnapshot(`
    <h1>Hello, Marko!</h1>
  `)
})

Opções do render

Normalmente você não precisará especificar opções, mas caso precise, estas são as opções disponíveis que podem ser passadas como terceiro argumento para render.

container

Por padrão em testes client-side, a Marko Testing Library cria uma div e anexa essa div ao document.body, sendo este o local onde seu componente será renderizado. Se você fornecer seu próprio container HTMLElement via esta opção, ele não será anexado automaticamente ao document.body.

Exemplo: ao testar um elemento tablebody, ele não pode ser filho de uma div. Neste caso, você pode especificar uma table como container de renderização.

const table = document.createElement('table')

const {container} = await render(MyTableBody, null, {
  container: document.body.appendChild(table),
})

Resultado do render

O método render retorna uma promise que resolve para um objeto com estas propriedades:

...queries

A funcionalidade mais importante do render é que as queries da API Principal são automaticamente retornadas com seu primeiro argumento vinculado ao resultado da renderização do seu componente.

Veja Queries para a lista completa.

Exemplo

const {getByLabelText, queryAllByTestId} = await render(MyTemplate)

Alternativamente, você pode usar o método de nível superior screen para consultar todos os componentes atualmente renderizados no document.body, ex:

import { render, screen } from "@marko/testing-library"

await render(MyTemplate)
const el = screen.getByText(...)

debug

Este método é um atalho para registrar o prettyDOM de todos os elementos filhos dentro do container.

import {render} from '@marko/testing-library'
import Greeting from './greeting.marko'

const {debug} = await render(Greeting, {name: 'World'})
debug()

// <h1>Hello World</h1>
// you can also pass an element: debug(getByTestId('messages'))

Este é um wrapper simples em torno do prettyDOM, que também é exposto e vem da DOM Testing Library.

rerender

O input de componentes Marko pode mudar a qualquer momento por um componente pai. Embora geralmente esse input seja passado declarativamente, às vezes é necessário garantir que seu componente reaja adequadamente a novos dados. Você pode simular seu componente recebendo novo input passando novos dados para o helper rerender.

import {render} from '@marko/testing-library'
import Greeting from './greeting.marko'

const {rerender, debug} = await render(Greeting, {name: 'World'})

// re-render the same component with different props
await rerender({name: 'Marko'})

debug()
// <h1>Hello Marko</h1>

emitted

Componentes Marko também se comunicam com seus pais através de eventos. Recomenda-se testar se seus componentes emitem os eventos corretos no momento certo.

O helper emitted faz exatamente isso. Chamá-lo retornará todos os eventos emitidos desde a última chamada. Você também pode passar um tipo de evento para filtrar os resultados.

import {render, fireEvent} from '@marko/testing-library'
import Counter from './counter.marko'

const {getByText, emitted} = await render(Counter)

const button = getByText('Increment')

await fireEvent.click(button)
await fireEvent.click(button)

// Assuming the `Counter` component forwards these button clicks as `increment` events
expect(emitted('increment')).toHaveProperty('length', 2)

await fireEvent.click(button)

// Note: the tracked events are cleared every time you read them.
// Below we are snapshoting the events after our last assertion,
// the return value will include an array with all of the arguments for each increment event.
expect(emitted('increment')).toMatchInlineSnapshot(`
    Array [
      Array [
        Object {
          "count": 3,
        },
      ],
    ]
`)

// Without an event type will give you all events with their type and arguments.
expect(emitted()).toMatchInlineSnapshot(`
    Array [
      Object {
        "args": Array [
          Object {
            "count": 0,
          },
        ],
        "type": "increment",
      },
      Object {
        "args": Array [
          Object {
            "count": 1,
          },
        ],
        "type": "increment",
      },
      Object {
        "args": Array [
          Object {
            "count": 3,
          },
        ],
        "type": "increment",
      }
    ]
  `)

cleanup

Assim como o método cleanup de nível superior, este permite remover e destruir o componente renderizado antes da conclusão do teste.

Isto é útil para validar se um componente limpa corretamente quaisquer mutações DOM após ser destruído.

import {render, screen, getRoles} from '@marko/testing-library'
import Main from './main.marko'
import Dialog from './dialog.marko'

await render(Main)

const main = screen.getByRole('main')
expect(main).not.toHaveAttribute('aria-hidden')

const {cleanup} = await render(Dialog)
expect(main).toHaveAttribute('aria-hidden') // assert added attribute

cleanup() // destroy the dialog

expect(main).not.toHaveAttribute('aria-hidden') // assert attribute removed

container

O nó DOM que contém seu componente Marko renderizado. Para testes server-side, isso é um JSDOM.fragment; para client-side, será o que for passado como opção container do render.

Dica: para obter o elemento raiz do seu componente renderizado, use container.firstChild.

🚨 Se você se pegar usando container para consultar elementos renderizados,
reconsidere! As outras consultas são projetadas para serem mais resilientes a
alterações no componente sendo testado. Evite usar container para consultar elementos!

fireEvent

Como o Marko agrupa atualizações do DOM para evitar re-renderizações desnecessárias,
os auxiliares fireEvent são reexportados como
funções async. Aguardá-las garante que o DOM foi atualizado corretamente
em resposta ao evento acionado no teste.

await fireEvent.click(getByText('Click me'))

cleanup

Em testes client-side, seus componentes são renderizados em um elemento
placeholder HTMLElement. Para garantir sua remoção e destruição adequadas
após cada teste, o método cleanup é chamado automaticamente via vinculação
a afterEach em frameworks de teste suportados. Você também pode chamar
cleanup manualmente a qualquer momento para remover todos os componentes anexados.

import {render, cleanup, screen} from '@marko/testing-library'
import Greeting from './greeting.marko'

await render(Greeting, {name: 'Marko'})

expect(screen.getByText(/Marko/)).toBeInTheDocument()

// manually cleanup the component before the test is finished
cleanup()
expect(screen.queryByText(/Marko/)).toBeNull()

Você pode desativar a limpeza automática de testes importando este módulo:

import '@marko/testing-library/dont-cleanup-after-each'

No Mocha, use
mocha --require @marko/testing-library/dont-cleanup-after-each como atalho.

No Jest, inclua
setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"] na sua
configuração do Jest para evitar repetições por arquivo.