Неудача в тестировании компонента React, который использует Context.Consumer в наборе тестов Enzyme.
Компонент SideWrapper:
const SidebarWrapper = props => (
<SidebarContext.Consumer>
{({ sidebar: { Component, isOpen, close } }) => (
<OnOutsideClick
onClick={event => {
/* this class is added to hamburger menu to avoid opening + closing at the same time */
if (!event.target.className.includes("override-outside-click")) {
close();
}
}}
>
<div className={classNames("sidebar", { "sidebar--open": isOpen })}>
<Component />
</div>
</OnOutsideClick>
)}
</SidebarContext.Consumer>
);
Голый минимум, чтобы показать проблему:
describe("<SidebarWrapper />", () => {
it("test", () => {
const app = mount
(
<SidebarWrapper />
);
expect(app.find(".sidebar"));
});
});
Результатом является «Ошибка типа: невозможно прочитать свойство« Компонент »из неопределенного». Поставщик уже имеет компонент «Загрузка» по умолчанию, проблема не существует.
Также пытался использовать babel-rewire-plugin для насмешки SidebarContext с фиктивным компонентом, тогда я получаю ошибку:
Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: object.
В моем package.json есть:
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"react": "^16.8.4",
"react-dom": "^16.8.4"
Есть идеи, как заставить это работать?