Redux + karma-webpack - не может прочитать displayName из неопределенного при импорте React.Component

Question

Я использую karma-webpack и я рефакторинг React Component для использования в нескольких местах. Я переместил компонент в его собственный файл, поэтому я могу импортировать его и подключать по- другому, применяя mapStateToProps / mapDispatchToProps в HOC я позже включу на своей странице.

Вот сценарий:

EventTable - import s EventTableComponent, экспорт connect редактируемый / упакованный компонент MyEventTable - import s EventTableComponent, экспорт connect редактируемый / упакованный компонент EventTableComponent - определяет общие реквизиты / поведения для визуализации строк данных

Когда я git mv EventTable для EventTableComponent и рефакторинг кода, чтобы connected вещи находятся в HOC, тесты начинают не в состоянии импортировать EventTableComponent только в karma-webpack, Chrome работает просто отлично, а вид отображается отлично. QA доволен или будет, но моя сборка не удалась.

Сборка терпит неудачу, потому что WrappedComponent не определено для EventTable а также MyEventTable компоненты, которые вызывают connect кинуть сообщение в краткий обзор (cannot read displayName of undefined), но я даже не импортирую ни один из этих файлов в свой тест! Вместо этого происходит сбой во время сборки веб-пакета karma, но до запуска каких-либо тестов.

Я исправил сборку локально, уничтожив вид и сделав "фальшивку" / "замену", например так:

function EventTableComponent () { 
    return (<div>garbage here</div>);
}

Сборка проходит.

Самая запутанная часть во всем этом? Я даже не проверяю HOC вообще. Я импортирую только EventTableComponent в тест, но karma-webpack, как предлагается в документации Redux.

Я написал минимальный пример для иллюстрации: https://gist.github.com/zedd45/cbc981e385dc33d6920d7fcb55e7a3e0

Answer 1

Я смог решить эту проблему, обманув систему модулей.

// EventTableComponentWrapper.jsx

import EventTableComponent from './EventTableComponent';

if (process.env.NODE_ENV === 'test') {
    module.exports = require('./EventTableComponent.test.jsx');
} else {
    module.exports = EventTableComponent;
}

Я импортирую этот файл в оба компонента HOC, и, основываясь на моей переменной среды, я получаю правильный, и Karma Webpack обманывают, чтобы не взорваться.

Я пришел к такому выводу, основываясь на нескольких выводах, но заслуга в этом SO Post: условная сборка на основе среды с использованием Webpack

а также Wout Mertens из канала Webpack Gitter, чтобы сообщить мне о проблеме, связанной с импортом / экспортом класса ES6.