Saltar al contenido principal

API

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Marko Testing Library reexporta todo desde DOM Testing Library además de estos métodos:

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 en un contenedor que se añade a 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>
  `)
})

Opciones de render​

Normalmente no necesitarás especificar opciones, pero si alguna vez lo haces, aquí están las opciones disponibles que puedes proporcionar como tercer argumento de render.

container​

Por defecto en pruebas de cliente, Marko Testing Library creará un div y añadirá ese div al document.body, donde se renderizará tu componente. Si proporcionas tu propio container HTMLElement mediante esta opción, no se añadirá automáticamente al document.body.

Por ejemplo: Si estás probando un elemento tablebody, no puede ser hijo de un div. En este caso, puedes especificar una table como container de renderizado.

const table = document.createElement('table')

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

Resultado de render​

El método render retorna una promesa que se resuelve con un objeto que tiene varias propiedades:

...queries​

La característica más importante de render es que las consultas de la API Principal se devuelven automáticamente con su primer argumento vinculado a los resultados de renderizar tu componente.

Consulta Queries para ver la lista completa.

Ejemplo

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

Alternativamente, puedes usar el método de nivel superior screen para consultar todos los componentes renderizados actualmente en document.body, ej:

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

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

debug​

Este método es un atajo para registrar el prettyDOM de todos los hijos dentro del 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'))

Es un envoltorio simple alrededor de prettyDOM, que también está expuesto y proviene de DOM Testing Library.

rerender​

El input de un componente Marko puede cambiar en cualquier momento desde un componente padre. Aunque normalmente este input se pasa de forma declarativa, a veces es necesario asegurar que tus componentes reaccionen adecuadamente a nuevos datos. Puedes simular que tu componente recibe nuevo input pasando datos nuevos al asistente 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​

Los componentes Marko también se comunican con sus padres mediante eventos. Se recomienda probar que tus componentes emitan los eventos correctos en el momento adecuado.

El asistente emitted hace exactamente esto. Al llamarlo, devolverá todos los eventos emitidos desde su última invocación. También puedes filtrar los resultados pasando un tipo de evento.

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​

Al igual que el método global cleanup, esto te permite eliminar y destruir el componente renderizado actualmente antes de completar la prueba.

Es útil para validar que un componente limpie adecuadamente las mutaciones del DOM al ser destruido.

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​

El nodo DOM que contiene tu Componente Marko renderizado. En pruebas de servidor es un JSDOM.fragment, y en pruebas de cliente será lo que se haya pasado como opción container de renderizado.

Consejo: Para obtener el elemento raíz de tu componente renderizado, usa container.firstChild.

🚨 ¡Si te encuentras usando container para consultar elementos renderizados, deberías reconsiderarlo! Las otras consultas están diseñadas para ser más resistentes a los cambios que se harán en el componente que estás probando. Evita usar container para consultar elementos.

fireEvent​

Debido a que Marko agrupa las actualizaciones del DOM para evitar rerenderizados innecesarios, los ayudantes de fireEvent se reexportan como funciones async. Al esperar esto, se asegura que el DOM se haya actualizado correctamente en respuesta al evento disparado en la prueba.

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

cleanup​

En las pruebas del lado del cliente, tus componentes se renderizan en un elemento HTML de marcador de posición. Para asegurar que tus componentes sean removidos y destruidos correctamente, después de cada prueba, el método cleanup se llama automáticamente por ti al conectarse a afterEach en los frameworks de pruebas compatibles. También puedes llamar manualmente a cleanup en cualquier momento, lo que eliminará todos los componentes adjuntos.

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()

Puedes desactivar la limpieza automática de pruebas importando el siguiente módulo:

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

Con Mocha puedes usar mocha --require @marko/testing-library/dont-cleanup-after-each como una forma abreviada.

Si estás usando Jest, puedes incluir setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"] en tu configuración de Jest para evitar hacer esto en cada archivo.