javascript - 如何测试私有(private) React 组件

Question

我最近在 React 项目中接受了一份尚未使用 ES6 的工作。我有 ES6 背景，刚刚写了一个大文件，我无法弄清楚如何在不使用 ES6 的情况下进行测试。

基本上，我有一个主要组件，它有大约 7 个左右的私有(private)组件，这些组件大多作为单独的组件构建，以提高可读性、测试和性能。 (能够对私有(private)组件进行应该组件更新是一个巨大的提升)

这是我的问题:

如果不导出我的私有(private)组件，我就找不到编写测试它们的方法。

因为我们没有使用 ES6，所以我无法使用

export default MyComponent
export PrivateComponent1
export PrivateComponent2

语法，我知道从单个文件导出多个组件的唯一方法是使用

exports.MyComponent = MyComponent
exports.PrivateComponent1 = PrivateComponent1
exports.PrivateComponent2 = PrivateComponent2

但是这不好，因为在 require 语句中我需要使用

const MyComponent = require('MyComponent').MyComponent

理想情况下，我想使用类似的东西:

module.exports = MyComponent
exports.PrivateComponent1 = PrivateComponent1
exports.PrivateComponent2 = PrivateComponent2

但这似乎无效。

此外，最好不要将其分解为单独的文件。

...这就是我不做 TDD 所得到的结果:(

Answer 1

CommonJS 模块

module.exports = MyComponent
exports.PrivateComponent1 = PrivateComponent1
exports.PrivateComponent2 = PrivateComponent2

这是不可能的，因为 exports 是 module.exports 的别名，并且在设置 module.exports 中的属性 exports 不会被导出。

转译器 ( Babel ) 所做的是创建一个“默认”属性。

ES2015

所以，ES2015 中的代码如下:

import AnotherModule from './anotherModule';

export default class Foo {}

export class Bar {}

将被转译为:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Bar = undefined;

var _anotherModule = require('./anotherModule');

var _anotherModule2 = _interopRequireDefault(_anotherModule);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  _classCallCheck(this, Foo);
};

exports.default = Foo;

var Bar = exports.Bar = function Bar() {
  _classCallCheck(this, Bar);
};

注意行 exports.default = Foo; 和 var Bar =exports.Bar = ...。

为了在不使用 ES2015(也不使用转译器)的情况下将该模块导入到另一个文件中，您可以使用 var Foo = require('./myPreviousModule').default。

Babel 创建了一个互操作函数(请参阅函数 _interopRequireDefault)，以允许用户以相同的方式导入 Node CommonJS 模块和 ES2015 模块。