Verwenden von Rewire mit TypeScript

Question

Ich arbeite an einem React-Native-Projekt mit TypeScript. Um meine Komponententests zu schreiben, möchte ich die babel-plugin-rewire verwenden, um meine Modulimporte nachzuahmen. TypeScript fügt jedoch am Ende der Importe beim Konvertieren von ES6 nach ES5 ein _1 Suffix hinzu, was meinen Testcode unterbricht.

Beachten Sie Folgendes:

import Test from 'test-file'; 

dies durch Typoskript umgewandelt werden könnten:

var test_file_1 = require('test-file'); 

Um die Test-Klasse zu verspotten die Rewire Plugin würde ich schreiben müssen:

ComponentToTest.__Rewire__('Test', TestMock); 

aber da der Import umbenannt wurde, wird dies brechen.

Obwohl dies by design ist, würde ich gerne wissen, ob es Problemumgehungen gibt.

Danke.

Answer 1

Ich weiß nicht über Babel-Plugin-Rewire, aber wenn Sie TypeScript mit Rewire allein verwenden, einschließlich des Kompilierens von ES6-Modulen zu ES5, können Sie den generierten Dateiimport direkt mocksen.

I.e. Dies sollte funktionieren:

ComponentToTest.__set__('test_file_1', { default: TestMock }); 

Das tut hängt dann von der _1 Suffix, die plausibel in späteren Typoskript Versionen ändern könnte oder wenn Sie bestimmte Änderungen an dem Typoskript Code selbst zu machen. Ich denke jedoch, dass das Risiko ziemlich gering ist.

Voll Rewire + TS Beispiel:

Component.ts:

import DefaultComponent from "other-component"; 
import { IndividuallyExportedComponent } from "yet-another-component"; 

// ... Do something worth testing 

Component-Test.ts:

import rewire = require("rewire"); 
let RewiredComponent = rewire("../src/Component"); 

let defaultMock = { /* Make a mock of your dependency */ }; 
RewiredComponent.__set__('other_component_1', { 
    default: defaultComponentMock 
}); 

let individuallyExportedMock = { /* Make a mock of your dependency */ }; 
RewiredComponent.__set__('yet_another_component_1', { 
    IndividuallyExportedComponent: individuallyExportedMock 
}); 

// RewiredComponent has the wrong type now. YMMV, but I'm doing type-wrangling 
// that looks something like: 

import * as RealComponent from "../src/Component"; 
let Component: typeof RealComponent & typeof RewiredComponent = <any> RewiredComponent; 

// 'Component' now has the same type as the real module, plus the 
// .__set__ etc methods from Rewire.