Zum Hauptinhalt springen

Helfer bei Jutro-Tests

Das @jutro/test-Paket bietet Funktionen, die das Schreiben von Jutro-Tests erleichtern.

Testbibliothek​

Jutro umschließt die Dienstprogramme von Testbibliotheken, sodass Sie sie direkt aus @jutro/test importieren können: Dazu gehört:

  • @testing-library/react

Sie können sie wie folgt importieren:

import { screen } from '@jutro/test';
import userEvent from '@testing-library/user-event';

Helfer​

render​

import { render, screen } from '@jutro/test';

render(<MyComponent />);
expect(screen.getByRole('heading')).toBeInTheDocument();

Ein Jutro-Wrapper um render aus der Testbibliothek.

Sie können Renderoptionen als zweites Argument von render() angeben. Die folgenden Anbieter werden standardmäßig gerendert:

  • router
  • globalization
  • modalNext
  • theme
  • breakpointTracker

Für jeden Anbieter haben Sie folgende Möglichkeiten:

  • Ersetzen durch einen anderen Anbieter (muss ein Kontextanbieter sein)
  • Übergeben von Eigenschaften an einen bestehenden Anbieter
  • Deaktivieren eines Anbieters

Beispiel:

render(<CurrencyInput {...currencyInputProps} />, {
  providers: {
    theme: {
      disable: true,
    },
    router: {
      provider: HashRouterContext.Provider,
    },
    globalization: {
      props: {
        defaultLocale: 'ja-JP',
      },
    },
  },
});

React Strict Mode​

Der React Strict Mode ist eine native React-Komponente, die zusätzliche Prüfungen ausführt, wenn sie in einer Entwicklungsumgebung aktiviert ist, und Ihnen hilft, häufig auftretende Fehler in Ihren Komponenten zu finden. Dies bietet die folgenden Vorteile:

  • Ihre Komponenten werden auf die Verwendung veralteter APIs geprüft
  • Die Komponenten werden erneut gerendert, um Komponenten zu finden, die ihr Verhalten beim zweiten Rendern unbeabsichtigt ändern
  • Es wird ein zusätzlicher Einrichtungs- und Bereinigungszyklus für alle Effekte in Ihrem Code erneut ausgeführt

Um den React Strict Mode zu aktivieren, fügen Sie der Datei .env die Umgebungsvariable JUTRO_REACT_STRICT_MODE=true hinzu.

Für bereits vorhandene Anwendungen ist der Strict Mode nicht standardmäßig aktiviert. Bei allen neuen Jutro-Apps, die aus einer Jutro-App-Vorlage erstellt werden, wird die Umgebungsvariable in der .env-Datei aktiviert.

translatorForTests​

  • key - die zu übersetzende Meldungsform oder eine Zeichenfolge
  • args - ein Objekt mit Argumenten, das an die Lokalisierungsmeldung zur Darstellung von Variablenwerten übergeben wird

Wenn key das Format intlMessageShape hat, wird Tx: dem Wert des Feldes defaultMessage vorangestellt.

Wenn key eine Zeichenfolge ist, gibt es die key zurück.

translatorForTestsWithSuffix​

Wie translatorForTests, fügt aber -translated am Ende jeder Meldung hinzu.

getTranslation​

import { screen, getTranslation } from '@jutro/test';

const languageLabel = screen.getByText(
  getTranslation({
    id: 'my-app.widgets.SomeComponent.languageLabel',
    defaultMessage: 'Language',
  })
);
  • input - die zu übersetzende Meldungsform oder eine Zeichenfolge
  • args - ein Objekt mit Argumenten, das an die Lokalisierungsmeldung zur Darstellung von Variablenwerten übergeben wird

Wenn input das Format intlMessageShape hat, wird der formatierte Wert des Feldes defaultValue zurückgegeben.

Wenn input eine Zeichenfolge ist, gibt es die Zeichenfolge zurück.

flushPromises​

Sie können diese Funktion verwenden, um auf den Abschluss asynchroner Vorgänge zu warten. Zum Beispiel in einer async-Testfunktion:

await flushPromises();
expect(everythingIsFineNow());

In den meisten Fällen ist dies nicht erforderlich. Bevor Sie flushPromises verwenden, sollten Sie die folgenden Methoden aus der Testbibliothek ausprobieren:

convertToUTCObject​

const year = convertToUTCObject(date).year;

Konvertiert ein Date-Objekt in ein Objekt mit den folgenden Feldern:

  • Jahr
  • Monat
  • Tag
  • Stunde
  • Minute

convertToUTCString​

const utcSting = convertToUTCString(date);

Konvertiert ein Date-Objekt in eine UTC-formatierte Zeichenfolge, die das Jahr, den Monat, den Tag, die Stunde und die Minute enthält.

convertToUTCDate​

const properDate = convertToUTCDate(date);

Konvertiert ein Date-Objekt in ein UTC-Datumsobjekt.

getLocaleTestData​

const testData = getLocaleTestData(category, options);
  • category - kann „Datum“, „Zahl“ oder „Währung“ sein
  • options - ein Objekt mit Optionen:
    • excludeValues: Zeichenfolge[]

Gibt Gebietsschema-Daten der angegebenen Kategorie für jedes unterstützte Gebietsschema zurück.

Assertions​

assertIsInput​

const input = screen.getByRole('switch', { name: label });
assertIsInput(input);

Gibt einen Fehler aus, wenn input keine HTML-Eingabe ist.

assertIsAnchor​

const link = screen.getByRole('link');
assertIsAnchor(link);

Gibt einen Fehler aus, wenn link kein HTML-Anker ist.

const link = screen.getByRole('link');
assertIsLink(link);

Gibt einen Fehler aus, wenn link keine HTML-Verknüpfung ist.

assertIsElement​

const link = screen.getByRole('link');
assertIsElement(link);

Gibt einen Fehler aus, wenn link kein HTML-Element ist.

assertIsNotNull​

const titleContent = screen.getByRole('heading').textContent;
assertIsNotNull(titleContent);

Gibt einen Fehler aus, wenn titleContent null ist.