Zum Hauptinhalt springen

Muster in RTL

Nachfolgend finden Sie einige gängige Muster in RTL. Beachten Sie, dass diese Beispiele keinen vollständigen Code darstellen und möglicherweise nicht in allen Szenarien funktionieren.

Anordnung​

Das grundlegende Rendering wird durch das Ersetzen der mount- oder shallow-Funktion durch die render-Funktion erreicht. Sie müssen die render-Funktion aus dem @jutro/test-Paket importieren.

render(<Component />);

Das Beispiel unten zeigt TranslatorProvider, aber ModalNextProvider, ThemeProvider, BreakpointTrackerProvider und router sind ebenfalls enthalten.

render(<Component />);

Bei der Übergabe von Eigenschaften in einen Kontext müssen Sie ein zweites Argument für render angeben, das Render-Optionen enthält. Die vollständige Liste der Optionen finden Sie hier.

Sie können auch Kontextanbieter mithilfe der Variablen providers konfigurieren, wie im Folgenden dargestellt. Sie können Eigenschaften an den Anbieter übergeben, den Anbieter deaktivieren oder durch Ihren eigenen benutzerdefinierten Anbieter ersetzen. Es gibt fünf Anbieter, die Sie konfigurieren können:

  • router
  • globalization
  • modalNext
  • theme
  • breackpointTracker
render(<Component />, {
  providers: {
    globalization: {
      props: {
        defaultLocale: someLocale,
      },
    },
  },
});

Ausführung​

Ein Klick-Ereignis in RTL zu simulieren ist einfach:

userEvent.click(button);

Das Simulieren der Eingabe eines Werts in ein Feld ist in RTL viel einfacher. Die Funktion userEvent.clear löscht das Feld und die Funktion userEvent.type dient zur Eingabe von Zeichen darin. Weitere Informationen zum Dienstprogramm userEvent finden Sie in der userEvent Dokumentation.

userEvent.clear(input);
userEvent.type(input, 'myValue{enter}');

In RTL gibt es keine Möglichkeit, ein bestimmtes Element direkt zu fokussieren oder weichzuzeichnen, aber Sie können das Drücken der Tabulatortaste leicht emulieren.

Hinweis: Dies funktioniert nur, wenn die Schaltfläche das erste fokussierbare Element auf der Seite ist. Wenn es das zweite fokussierbare Element ist, wären drei Tabulatortastendrücke erforderlich: zwei, um die Taste zu fokussieren, und ein dritter, um sie zu weichzuzeichnen.

userEvent.tab();
userEvent.tab();

Annehmen​

So prüfen Sie, ob eine Eingabe den gewünschten Wert hat:

expect(screen.getByRole('textbox')).toHaveValue('foo');

So prüfen Sie, ob eine Schaltfläche existiert und eine korrekt übersetzte aria-label hat:

const myButton = screen.getByLabelText(getTranslation(messageProps.myBtnLabel));

expect(myButton).toBeInTheDocument();

Das folgende Beispiel veranschaulicht, dass Annahmen bei der Verwendung von Mocks identisch sind. Der einzige Unterschied liegt im Aktionscode:

const callbackSpy = jest.fn();

// some actions happen

expect(callbackSpy).toHaveBeenCalledWith(
  newValue,
  undefined,
  expect.anything()
);

Der Matcher className hat in @testing-library/jest-dom einen anderen Namen. Die Liste aller verfügbaren Matcher finden Sie hier.

expect(element).toHaveClass('someClass');

So prüfen Sie, ob ein Element mit einem bestimmten Text existiert:

expect(screen.getByText(getTranslation('myText'))).toBeInTheDocument();

So prüfen Sie, ob ein Kontrollkästchen aktiviert ist:

const checkbox = screen.getByRole('checkbox');

expect(checkbox).toBeChecked();

Im Folgenden wird gezeigt, wie sie prüfen können, ob die Eingabe barrierefrei deaktiviert ist. Beachten Sie, dass .toBeDisabled() hier nicht verwendet werden kann, da das Vorhandensein oder Nichtvorhandensein des aria-disabled-Attributs dabei nicht berücksichtigt wird.

expect(input).toHaveAttribute('aria-disabled', 'true');
On this page