API

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Marko Testing Library réexporte tout de DOM Testing Library ainsi que ces méthodes :

• render

  • Options de render
    • container

• Résultat de 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
)

Effectue le rendu dans un conteneur ajouté à 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>
  `)
})

Options de render

Vous n'aurez pas souvent besoin de spécifier des options, mais si c'est le cas, voici les options disponibles que vous pouvez fournir comme troisième argument à render.

container

Par défaut pour les tests côté client, Marko Testing Library crée une div et ajoute cette div à document.body, et c'est là que votre composant sera rendu. Si vous fournissez votre propre container HTMLElement via cette option, il ne sera pas automatiquement ajouté à document.body.

Par exemple : Si vous testez un élément tablebody, il ne peut pas être enfant d'un div. Dans ce cas, vous pouvez spécifier une table comme container de rendu.

const table = document.createElement('table')

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

Résultat de render

La méthode render renvoie une promesse qui se résout avec un objet possédant quelques propriétés :

...queries

La fonctionnalité la plus importante de render est que les requêtes de l'API principale sont automatiquement renvoyées avec leur premier argument lié aux résultats du rendu de votre composant.

Voir Requêtes pour une liste complète.

Exemple

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

Alternativement, vous pouvez utiliser la méthode screen de niveau supérieur pour interroger tous les composants actuellement rendus dans document.body, par exemple :

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

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

debug

Cette méthode est un raccourci pour journaliser le prettyDOM de tous les enfants à l'intérieur du 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'))

Il s'agit d'un simple wrapper autour de prettyDOM, également exposé et provenant de DOM Testing Library.

rerender

L'input d'un composant Marko peut changer à tout moment par un composant parent. Bien que souvent cette entrée soit transmise à votre composant de manière déclarative, il est parfois nécessaire de s'assurer que vos composants réagissent correctement aux nouvelles données. Vous pouvez simuler la réception d'un nouvel input par votre composant en passant de nouvelles données à l'assistant 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

Les composants Marko communiquent également avec leurs parents via des événements. Il est recommandé de tester également que vos composants émettent les bons événements au bon moment.

L'assistant emitted fait exactement cela. Son appel renvoie tous les événements émis depuis le dernier appel à l'assistant. Vous pouvez également passer un type d'événement pour filtrer les résultats.

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

Comme la méthode cleanup de niveau supérieur, celle-ci vous permet de supprimer et détruire le composant actuellement rendu avant la fin du test.

Cela peut être utile pour vérifier qu'un composant nettoie correctement toutes les mutations du DOM après sa destruction.

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

Le nœud DOM conteneur de votre composant Marko rendu. Pour les tests côté serveur, il s'agit d'un JSDOM.fragment, et pour les tests côté client, ce sera ce qui est passé comme option container du rendu.

Conseil : Pour obtenir l'élément racine de votre élément rendu, utilisez container.firstChild.

⚠️ Si vous vous surprenez à utiliser container pour interroger des éléments rendus, vous devriez reconsidérer votre approche ! Les autres requêtes sont conçues pour être plus résilientes aux modifications apportées au composant testé. Évitez d'utiliser container pour interroger des éléments !

fireEvent

Comme Marko regroupe les mises à jour DOM pour éviter les rendus inutiles, les helpers fireEvent sont réexportés comme fonctions async. L'attente (await) garantit que le DOM a été correctement mis à jour en réponse à l'événement déclenché dans le test.

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

cleanup

Dans les tests côté client, vos composants sont rendus dans un élément HTMLElement temporaire. Pour garantir leur suppression et destruction correctes après chaque test, la méthode cleanup est automatiquement appelée via afterEach dans les frameworks de test pris en charge. Vous pouvez aussi appeler cleanup manuellement à tout moment pour supprimer tous les composants attachés.

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

Vous pouvez désactiver le nettoyage automatique des tests en important :

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

Avec Mocha, utilisez le raccourci : mocha --require @marko/testing-library/dont-cleanup-after-each.

Avec Jest, ajoutez dans votre configuration : setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"].