Detaillierte Erläuterung der Grundkonfiguration des automatisierten Testens von Vue-Jest

Tests sind ein sehr wichtiger Teil bei der Entwicklung von Anwendungen im großen Maßstab. Jest kann für Unit-Tests in Vue-Projekten verwendet werden. Jest ist ein von Facebook eingeführtes Test-Framework, das Mocha, Chai, JSdom, Sinon und andere Funktionen integriert. Jest wurde in das Vue-Gerüst integriert, daher ist die Verwendung von Jest für Unit-Tests in Vue-Projekten die beste Wahl. Aus den bereitgestellten Beispielen geht hervor, dass die Konfiguration und der Test sehr einfach sind. In tatsächlichen Projekten gibt es jedoch viele Unterschiede. Ich habe beim Testen einer meiner Geschäftskomponenten viele Fehler gemeldet. Dieser Artikel fasst meine eigenen Erfahrungen zusammen und hilft den Lesern, Konfigurationsprobleme schnell zu lösen.

Installieren

Sie können ein Vue-Projekt direkt über das offizielle @vue/cli erstellen und dann die Option Unit Testing auswählen

? Überprüfen Sie die für Ihr Projekt erforderlichen Funktionen:
 ◉ Wählen Sie die Vue-Version
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Unterstützung
 ◉ Router
 ◉ Vuex
 ◯ CSS-Präprozessoren
 ◯ Linter / Formatierer
 ◉ Unit-Tests
 ◯ E2E-Tests

Wählen Sie dann Jest im Testframework aus

? Wählen Sie eine Unit-Test-Lösung: Jest
? Wo platzieren Sie die Konfiguration für Babel, ESLint usw. am liebsten? In einer dedizierten Konsole
fig-Dateien

Die vom Vue + Ts-Projekt schließlich generierte Konfigurationsdatei jest.config.js sieht folgendermaßen aus, als würde sie uns sagen, dass ich sie für Sie eingerichtet habe. Verwenden Sie sie einfach direkt. Für das Projekt müssen Sie die Kompatibilität jedoch noch manuell konfigurieren, da sonst viele Fehler gemeldet werden und Sie nicht fortfahren können.

modul.exporte = {
  Vorgabe: „@vue/cli-plugin-unit-jest/presets/typescript-and-babel“
}

Konfiguration

Schauen wir uns zunächst an, was in dieser voreingestellten Konfiguration steht. Suchen Sie das Paket @vue/cli-plugin-unit-jest/presets/typescript-and-babel. Tatsächlich sieht die Ausgabekonfiguration wie folgt aus:

modul.exporte = {
  moduleFileExtensions: [ // Testdateityp 'js',
    'jsx',
    'json',
    // Jest anweisen, *.vue-Dateien zu verarbeiten
    'Ansicht',
    'ts',
    'tsx'
  ],
  transform: { // Transformationsmethode // *.vue-Dateien mit vue-jest verarbeiten
    '^.+\\.vue$': erfordern.auflösen('vue-jest'),
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
    erfordern.auflösen('jest-transform-stub'),
    '^.+\\.jsx?$': erfordern.lösen('babel-jest'),
    '^.+\\.tsx?$': erfordern.Auflösung('ts-jest'),
  },
  transformIgnorePatterns: ['/node_modules/'], // Node_modules während der Transformation ignorieren
  // unterstützt das gleiche @ -> src Alias-Mapping im Quellcode
  moduleNameMapper: { // @-Symbol gibt die Quelle des aktuellen Projekts an
    '^@/(.*)$': '<Stammverzeichnis>/src/$1'
  },
  Testumgebung: 'jest-environment-jsdom-fifteen',
  // Serialisierer für Snapshots
  snapshotSerializers: [ // Snapshot-Konfiguration 'jest-serializer-vue'
  ],
  testMatch: [ // Standardtestdatei '**/tests/unit/**/*.spec.[jt]s?(x)',
    '**/__tests__/*.[jt]s?(x)'
  ],
  // https://github.com/facebook/jest/issues/6766
  Test-URL: "http://localhost/",
  watchPlugins: [
    erfordern.auflösen('jest-watch-typeahead/Dateiname'),
    erfordern.lösen('jest-watch-typeahead/testname')
  ],
  Globale:
    'ts-scherz': {
      babelConfig: wahr
    }
  }
}

Unter diesen sind die wichtigeren Konfigurationen auch diejenigen, die wir am häufigsten zur Lösung von Problemen verwenden:

• moduleFileExtensions: Die zu testenden Dateitypen. Die Standardkonfiguration deckt hier grundsätzlich alle Dateitypen ab, es besteht also grundsätzlich kein Grund, diese zu ändern.
• transform: Transformationsmethode. Die übereinstimmenden Dateien müssen übersetzt werden, bevor sie erkannt werden können, andernfalls wird ein Fehler gemeldet.
• transformIgnorePatterns: Transformation ignoriert Konfiguration
• moduleNameMapper: Modulalias, füllen Sie es aus, wenn es verwendet wird

Häufige Fehler

SyntaxError: Syntaxfehler, höchstwahrscheinlich aufgrund fehlender Konvertierung, wie etwa die folgende Eingabeaufforderung:

 /Benutzer/zhuangbing.cai/Dokumente/Arbeitsbereich/Projekte/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    Standardmäßig normalisierende Komponente exportieren;
    ^^^^^^

    SyntaxError: Unerwartetes Token „Export“

Da wir die .mjs-Datei nicht konvertiert haben, ist der Fehler aufgetreten. Die schnellste Lösung besteht darin, die .mjs-Konvertierung in Transform hinzuzufügen.

verwandeln:
     '^.+\\.mjs$': 'babel-scherz'
}

Sie müssen lediglich die Konvertierungsmethode für die MJS-Datei angeben.

Ein anderer Typ von Syntaxfehler besteht darin, dass einige Dateien im Node_Modul transformiert werden müssen, aber von der TransformIgnorePatterns-Konfiguration ignoriert werden.

    Folgendes können Sie tun:
     • Um einige Ihrer „node_modules“-Dateien zu transformieren, können Sie in Ihrer Konfiguration ein benutzerdefiniertes „transformIgnorePatterns“ angeben.
     • Wenn Sie eine benutzerdefinierte Transformation benötigen, geben Sie in Ihrer Konfiguration eine „Transform“-Option an.
     • Wenn Sie einfach Ihre Nicht-JS-Module (z. B. binäre Assets) simulieren möchten, können Sie sie mit der Konfigurationsoption „moduleNameMapper“ ausblenden.

    Weitere Details und Beispiele zu diesen Konfigurationsoptionen finden Sie in den Dokumenten:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Benutzer/zhuangbing.cai/Dokumente/Arbeitsbereich/Projekte/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
    Standardmäßig normalisierende Komponente exportieren;
    ^^^^^^

    SyntaxError: Unerwartetes Token „Export“

In der Abbildung werden vue-runtime-helpers verwendet, aber da die Konfiguration von transformIgnorePatterns die Transformation ignoriert, verursacht dies einen Syntaxfehler. Die Lösung besteht darin, die Konfiguration von transformIgnorePatterns wie folgt zu ändern:

transformIgnorePatterns: [
    // Node_modules bei der Konvertierung ignorieren, aber keine Vue-Runtime-Helper einschließen
    '/node_modules/(?!(vue-runtime-helpers)/)',
  ],

Nach dem Ausschließen von Vue-Runtime-Helpern werden diese bei der Konvertierung nicht ignoriert, wodurch das Problem der Syntaxfehler gelöst wird.

Ts ist vom falschen Typ

 TypeScript-Diagnose (anpassen mit der Option „[jest-config].globals.ts-jest.diagnostics“):
    src/views/inventory-map/__tests__/available.spec.ts:15:1 – Fehler TS2304: Name „beforeEach“ kann nicht gefunden werden.

    15 vorJedem(() => {
       ~~~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:19:1 - Fehler TS2593: Name „describe“ nicht gefunden. Müssen Sie Typdefinitionen für einen Test-Runner installieren? Versuchen Sie es mit „npm i @types/jest“ oder „npm i @types/mocha“ und fügen Sie dann „jest“ oder „mocha“ zum Feld „Typen“ in Ihrer tsconfig hinzu.

    19 beschreiben('verfügbare-Bestandskarte', () => {
       ~~~~~~~~
    src/views/inventory-map/__tests__/available.spec.ts:20:3 - Fehler TS2593: Name „it“ kann nicht gefunden werden. Müssen Sie Typdefinitionen für einen Test-Runner installieren? Versuchen Sie es mit „npm i @types/jest“ oder „npm i @types/mocha“ und fügen Sie dann „jest“ oder „mocha“ zum Feld „Typen“ in Ihrer tsconfig hinzu.

Gemäß den Eingabeaufforderungen müssen Sie tscofig.json hinzufügen

{
    "Compileroptionen": {
    "Typen": [
      "webpack-Umgebung",
      "Scherz"
    ],
  }
}

Vortestarbeit

Bevor wir Testfälle schreiben können, benötigen wir Jest, um die Komponenteninstanz-VM und die gerenderte DOM-Struktur bereitzustellen. Wie erhält man diese Geschäftskomponente, um ein doppeltes Testen der Codelogik und der Seiteneffekte sicherzustellen?

Es ist nicht möglich, direkt auf Komponenten zu verweisen, da Ihre Geschäftskomponenten zahlreiche Abhängigkeiten erfordern, z. B. UI-Komponentenbibliotheken, Toolfunktionen, Vuex-Status usw. Daher müssen wir diese Abhängigkeiten zuerst behandeln.

Umgang mit Abhängigkeiten

Zunächst muss man wissen, wovon die zu testende Business-Komponente abhängt. Die globalen Abhängigkeiten findet man in den Einstiegsdateien main.ts oder main.js, die anderen lassen sich anhand der Referenzen in den Komponenten ermitteln. Wie erhält man eine Komponenteninstanz in Jest, nachdem eine Abhängigkeit besteht?

Vue bietet eine Bibliothek mit Unit-Test-Dienstprogrammen – Vue Test Utils, die beim Schreiben von Testfällen verwendet werden kann. Verwenden Sie zunächst createLocalVue, um eine Vue-Klasse zu erstellen, mit der Sie Komponenten und Mixins hinzufügen und Plug-Ins installieren können, ohne die globale Vue-Klasse zu verunreinigen, und verweisen Sie dann auf die Abhängigkeiten.

const _localVue = createLocalVue();
_localVue.use(Vuex);
_localVue.use(Benutzeroberfläche);
_localVue.use(i18nInstall);
_localVue.component('s-filter', SFilter);
_localVue.component('w-table', WTable);
_localVue.direktive('xxx', {
  eingefügt: (el, binding) => {
    ....
  },
});
exportiere const localVue = _localVue;

Auf diese Weise erhalten wir eine Vue-Klasse, die Abhängigkeiten enthält, und beschäftigen uns dann mit Vuex. Beispielsweise benötigen wir Aufzählungswerte

Enumerationen aus „./enums“ importieren;
export const systemStore = neuer Vuex.Store({
  Aktionen: {},
  Zustand: {
    Aufzählungen: {
      systemEnums: Aufzählungen,
    },
  },
});

Instanzen und DOM generieren

Nachdem wir localVue und Store erhalten haben, müssen wir sie verwenden, um Ergebnisse zu generieren und die Komponenten über Mount zu rendern.

importiere { localVue, systemStore } aus '@/utils/unit-test/common';
importiere { mount } von '@vue/test-utils';
require('intersection-observer'); // Kompatibel mit jsdom, unterstützt IntersectionObserver nicht
importiere TaskList von '../available-inventory-map/index.vue'; // Verweise auf das zu testende Unternehmen let store: any;
vorJedem(() => {
  speichern = Systemspeicher;
});

beschreiben('verfügbare-Bestandskarte', () => {
  it('Filterelementtest', () => {
    const renderer = createRenderer();
    const Wrapper = Mount (Taskliste, {
      lokalesVue,
      speichern,
      attachToDocument: wahr,
    });
    const html = wrapper.html(); // Vollständige HTML-Struktur abrufen const vm = wrapper.vm; // Komponenteninstanz console.log(html, vm);
  })
}

LocalVue und Store werden gemountet, um schließlich die Instanz und ihre DOM-Struktur zu erhalten. Als Nächstes können Sie Ihre eigenen Testfälle basierend auf der Instanz und dem DOM schreiben.

Zusammenfassen

Dieser Artikel bietet hauptsächlich eine Zusammenfassung der Probleme, die bei der Konfiguration automatisierter Jest-Tests in Vue + Ts-Projekten auftreten, stellt die grundlegende Konfiguration und Lösungen für häufige Fehler vor und zeigt, wie Sie vollständige Komponenteninformationen und DOM erhalten, bevor Sie mit dem Schreiben von Testfällen beginnen. Legen Sie den Grundstein für das nachfolgende Schreiben des Anwendungsfalls.

Verweise

Vue Test Utilities

Dies ist das Ende dieses Artikels über die detaillierte Konfiguration der Grundlagen des automatisierten Testens von Vue-Jest. Weitere relevante Inhalte zum automatisierten Testen von Vue-Jest finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!