我最近采取了一项工作，没有使用ES6，但在那里反应的项目。我有一个ES6背景，只写了一个大文件，我不知道如何测试而不使用ES6。如何测试私人React组件

基本上，我有一个主要组件，它大约有7个左右的私有组件，它们大多作为独立组件构建，以提高可读性，测试和性能。（如果能够对私人组件应该组件更新是一个巨大的推动）

这里是我的问题：

而不导出我的私人成分，我不能找到一种方法来编写测试它们。

，因为我们没有使用ES6，我不能使用

export default MyComponent 
export PrivateComponent1 
export PrivateComponent2

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

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

然而，这是不好的，因为然后在需要声明我需要使用

const MyComponent = require('MyComponent').MyComponent

理想情况下，我想使用的东西l ike：

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

但这似乎是无效的。

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

...这是我得到的不是做TDD :(

来源

2017-02-17 MichaelTaylor3D

为什么你在一个文件中有多个组件？理想情况下，即使只有其他组件使用它，也可以将每个组件抽象到它自己的文件中。抽象层有它自己的好处，再加上你可以单独导出每个组件并且不处理多个导出一个文件问题 – finalfreq

组件可以非常精细，我相信它确实有助于可读性，性能和调试。他们不想用一堆较小的组件来污染文件夹。 – MichaelTaylor3D

在这种情况下，我会说你唯一的选择是导出一个具有键/值对的对象，并且必须执行'const MyComponent = require（'MyComponent'）。MyComponent' – finalfreq

CommonJS的模块

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

因为exports是一个别名module.exports和exports韩元设置module.exports属性后是不可能的't be exported。

什么transpilers（Babel）做的是创建一个“default”属性。

ES2015

所以，在ES2015下面的代码：

import AnotherModule from './anotherModule'; 

export default class Foo {} 

export class Bar {}

将transpiled到：

'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模块。

来源

2017-02-17 19:05:49

这是一个很好的答案，所以简短的回答是，没有什么魔法可以做我想要的东西（他们会抱怨使用.default）但是这一些伟大的信息，告诉我为什么我不能做我想要的东西。谢谢！ – MichaelTaylor3D

如何测试私人React组件

回答

CommonJS的模块

ES2015

相关问题