将 Rewire 与 TypeScript 一起使用

Question

我正在使用 TypeScript 开发一个 React-Native 项目。要编写我的单元测试，我想使用 babel-plugin-rewire 来模拟我的模块导入。但是，TypeScript 在从 ES6 转换为 ES5 时在导入末尾添加了 _1 后缀，这破坏了我的测试代码。

考虑以下几点：

import Test from 'test-file';

这可能会被 TypeScript 转换为：

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

要使用 Rewire 插件模拟 Test 类，我必须编写：

ComponentToTest.__Rewire__('Test', TestMock);

但由于导入已重命名，这将中断。

虽然这是by design，但我很想知道是否有任何解决方法。

谢谢。

Answer 1

我不知道 Babel-Plugin-Rewire 但是如果你单独使用 TypeScript 和 Rewire，包括将 ES6 模块编译为 ES5，你可以轻松地直接模拟生成的文件导入。

即这应该有效：

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

这取决于 _1 后缀，它可能会在以后的 TypeScript 版本中发生变化，或者如果您对 TypeScript 代码本身进行某些更改。不过我认为这是相当低的风险。

完全重新布线 + TS 示例：

组件.ts：

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

// ... Do something worth testing

组件-Test.ts：

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

let defaultComponentMock = { /* 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.