Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie gehe ich mit der Verspottung von ES6-Modulimporten mit Jest um?

Barbara Streisand
Freigeben: 2024-10-23 22:34:02
Original
337 Leute haben es durchsucht

How to Handle ES6 Module Imports Mocking with Jest?

ES6-Modulimporte mit Jest verspotten

In der Welt des Testens mit ES6-Modulen kann das Verspotten von Abhängigkeiten manchmal eine Herausforderung darstellen. In diesem Artikel wird erläutert, wie ES6-Modulimporte mithilfe von Jest simuliert werden, und es wird eine Lösung bereitgestellt, die sowohl für benannte als auch für Standardexporte funktioniert.

Das Problem

Betrachten Sie das folgende hypothetische ES6-Modul, das auf einem anderen Modul basiert für Funktionalität:

<code class="js">// myModule.js
import dependency from './dependency';

export default (x) => {
  dependency.doSomething(x * 2);
};</code>
Nach dem Login kopieren

In einem idealen Testszenario möchten wir das Abhängigkeitsmodul verspotten und sicherstellen, dass die doSomething-Funktion mit den erwarteten Argumenten aufgerufen wird. Allerdings kann diese Aufgabe mit Jest schwierig sein.

Der „Yuck“-Ansatz

Ein gängiger Ansatz besteht darin, Importe durch Anforderungen zu ersetzen und sie innerhalb von Tests zu verschieben, wie hier zu sehen:

<code class="js">// Dependency Code
export const doSomething = (y) => console.log(y);

// Module Code (Modified)
export default (x) => {
  const dependency = require('./dependency'); // Yuck
  dependency.doSomething(x * 2);
};

// Test Code (Modified)
import myModule from '../myModule';
import dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    jest.mock('../dependency');

    myModule(2);

    const dependency = require('../dependency'); // Also yuck
    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>
Nach dem Login kopieren

Während dieser Ansatz den unmittelbaren Bedarf befriedigt, führt er unnötige Änderungen an der Codebasis ein und verschlechtert die Gesamtqualität des Codes.

Der „Hack“-Ansatz

Eine elegantere Lösung beinhaltet die Verwendung von import *-Syntax. Diese Technik ermöglicht die direkte Mutation benannter oder Standardexporte, wodurch das Verspotten mühelos wird.

Für benannte Exporte:

<code class="js">// Test Code
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.doSomething = jest.fn(); // Mutate the named export

    myModule(2);

    expect(dependency.doSomething).toBeCalledWith(4);
  });
});</code>
Nach dem Login kopieren

Für Standardexporte:

<code class="js">// Test Code
import myModule from '../myModule';
import * as dependency from '../dependency';

describe('myModule', () => {
  it('calls the dependency with double the input', () => {
    dependency.default = jest.fn(); // Mutate the default export

    myModule(2);

    expect(dependency.default).toBeCalledWith(4); // Assert against the default
  });
});
</code>
Nach dem Login kopieren

Vorsicht

Es ist wichtig zu beachten, dass die Mutation importierter Module auf diese Weise zu Nebenwirkungen und unvorhersehbarem Verhalten in Tests führen kann. Obwohl dieser Ansatz eine schnelle Lösung bieten kann, wird er daher nicht als langfristige Praxis empfohlen. Jest bietet konventionellere Methoden zum Verspotten und Ausspionieren von Modulen, die stattdessen in Betracht gezogen werden sollten.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit der Verspottung von ES6-Modulimporten mit Jest um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!