Wie stelle ich die Anforderung von webpack ein?

Ich verwende die Codeaufteilungsfunktion webpack (require.ensure), um die anfängliche Bundlegröße meiner Anwendung React zu reduzieren, indem Komponenten geladen werden, die beim Laden der Seite aus einem separaten Paket, das asynchron geladen wird, nicht sichtbar sind.Wie stelle ich die Anforderung von webpack ein?

Das funktioniert perfekt, aber Ich habe Probleme beim Schreiben eines Komponententests dafür.

Mein Testaufbau basiert auf Mocha, Chai und Sinon.

Hier der entsprechende Auszug aus dem Code ist ich bisher versucht:

describe('When I render the component',() => { 
    let component, 
     mySandbox; 
    beforeEach(() => { 
     mySandbox = sandbox.create(); 
     mySandbox.stub(require, 'ensure'); 
     component = mount(<PageHeader />); 
    }); 
    describe('the rendered component',() => 
     it('contains the SideNav component',() => 
      component.find(SideNav).should.have.length(1) 
     ) 
    ); 
    afterEach(() => mySandbox.restore()); 
});

Wenn der Test ausgeführt wird, erhalte ich diese Fehlermeldung:

„vor jedem“ Haken für „enthält die SideNav Komponente ": Kann nicht inexistent Eigentum gewährleisten

Stummel Dies geschieht, weil require.ensure ein Verfahren ist, das in einem uns existiert nur bpack bundle, aber ich bündle meine Tests nicht mit webpack, noch möchte ich das, weil es mehr Overhead und vermutlich längere Testlaufzeiten verursachen würde.

Also meine Frage ist:

Gibt es eine Möglichkeit webpack die require.ensure mit Sinon Stub ohne die Tests durch webpack läuft?

Quelle

2017-05-22 Patrick Hund

Sie sind korrekt.Jedes Modul erhält eine eindeutige "require" -Funktion. Es ist ziemlich kompliziert, als ich dachte. Lesen Sie mehr [hier] (http://fredkschott.com/post/2014/06/require-and-the-module-system/). Es wird sehr schwierig sein, den Patch "require.esnure" zu affen. Ich schlage Ihnen auch vor, etwas wie babel-plugin-rewire zu erwägen, das von @hinok vorgeschlagen wurde. –

Ihr Problem wurde hier beantwortet: https://stackoverflow.com/questions/33070482/writing-tests-for-javascript-module-using- webpacks-require-ensure-function –

Die Sache ist, ich evaluierte mit rewire, als ich mein Projekt begann und fand, dass Motelery weit überlegen ist, also denke ich, ich muss herausfinden, wie man die rewire Lösung von diesem Posten mit verwendet Spott. –

Jedes Modul hat seine eigene Instanz erfordert so die einzige Möglichkeit, require.ensure eine Art von Abstraktion zu verspotten zu haben, ist um require diese einzigartigen require aus dem Pflichtmodul in Test zu bekommen und dann ein Modell von ensure() die require hinzufügen Beispiel.

Sie könnten babel-plugin-rewire verwenden und Getter require zu bekommen, wie

const require = myComponent.__get__('require'); 
require.ensure =() => { /* mock here */};

Ich bin nicht 100% sicher, dass es funktionieren wird, aber auf jeden Fall würde ich versuchen, in diese Richtung zu gehen. Ich empfehle das Lesen von this issue auf Github, die auf Ihr Problem bezogen ist und eine Menge erklärt.

Quelle

2017-05-28 12:01:36 hinok

Wie stelle ich die Anforderung von webpack ein?

Antwort

Verwandte Themen