我最近採取了一項工作，沒有使用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

相關問題