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

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

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

EventTable - imports EventTableComponent, экспортирует connected/обернутый компонент MyEventTable - imports EventTableComponent, экспортирует connected/обернутый компонент EventTableComponent - определяет реквизиты/поведения, используемые для рендеринга строк данных

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

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

Я исправил сборку локально, уничтожив представление и сделав «подделку»/«замену» следующим образом:

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

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

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

Для иллюстрации я написал минимальную суть примера: /а>


webpack reactjs redux react-redux karma-webpack
person zedd45    schedule 25.08.2016    source источник
comment
Ваут Мертенс (из Webpack Gitter) предложил заменить imports на require. Это привело к прохождению тестов, но импорт перестал работать в приложении, поэтому компонент не отрисовывался.   -  person zedd45    schedule 26.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

// 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: Условная сборка на основе среды с использованием Webpack

а также Вауту Мертенсу с канала Webpack Gitter за то, что он сообщил мне о проблеме, связанной с импортом/экспортом классов ES6.

person zedd45    schedule 26.08.2016
comment
Это все еще взломано, и мне нравится лучшее решение - person zedd45; 27.08.2016