Heim  >  Artikel  >  Web-Frontend  >  Wie gehe ich mit der Verspottung von ES6-Modulimporten mit Jest um?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-23 22:34:02338Durchsuche

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>

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>

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>

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>

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!

Stellungnahme:
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