Как протестировать частные компоненты React

Question

Недавно я взял работу, которая не использует ES6, но там, где есть проект реакции. У меня есть фон ES6 и просто написал большой файл, который я не могу понять, как тестировать без использования ES6.

В принципе, у меня есть основной компонент, который имеет около 7 частных компонентов, которые в основном построены как отдельные компоненты для удобства чтения, тестирования и производительности. (Будучи в состоянии иметь РЕКОМЕНДУЕМОЕ обновление компонентов частных компонентов огромный толчок)

Вот мой вопрос:

без экспорта моих личных компонентов я не могу найти способ, чтобы написать тесты их.

, потому что мы не используем ES6, я не могу использовать синтаксис

export default MyComponent 
export PrivateComponent1 
export PrivateComponent2 

, единственный способ, которым я знаю, чтобы экспортировать несколько компонентов из одного файла заключается в использовании

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

однако это не подходит, потому что тогда в заявке на требование мне нужно использовать

const MyComponent = require('MyComponent').MyComponent 

Для меня идеально было бы использовать 1 ike:

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 {} 

будет 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 создает функцию interop (см. Функцию _interopRequireDefault), чтобы позволить пользователям одновременно импортировать модули Node CommonJS и ES2015.