Javascript 如何测试私有组件

我最近在react项目中接受了一份尚未使用ES6的工作。我有ES6的背景，刚刚写了一个大文件，不使用ES6我就不知道如何测试

基本上，我有一个主组件，它有大约7个私有组件，这些组件主要是作为独立组件构建的，用于可读性、测试和性能。能够对私有组件进行应有的组件更新是一个巨大的提升

这是我的问题：

如果不导出我的私有组件，我就找不到编写测试的方法

因为我们没有使用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的原因：

CommonJS模块 这是不可能的，因为导出是module.exports的别名，并且在设置module.exports后，将不会导出导出中的属性

Transpiler所做的是创建一个默认属性

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=导出。Bar=

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

---

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

为什么一个文件中有多个组件？理想情况下，您可以将每个组件抽象到其自己的文件中，即使它只被另一个组件使用。抽象层有其自身的优点，另外，您可以单独导出每个组件，而不必处理多个导出一个文件的问题。组件可以变得非常精细，我相信这确实有助于可读性、性能和调试。他们不想用一堆较小的组件污染文件夹。在这种情况下，我认为您唯一的选择是导出一个具有键/值对的对象，并且必须执行const MyComponent=require'MyComponent'。MyComponentHmm。。。我很害怕，这对他们来说也不是一个选择。解决方案是不将其分解为私有组件，而是将所有jsx放在父渲染函数中。我有点沮丧，我的可读性不是很好，现在：这是一个伟大的答案，所以简短的回答是，没有魔术可以做我真正想要的。他们会抱怨使用.default，但这是一些很好的信息，告诉我为什么我不能做我想做的事。谢谢

'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);
};