Question

在酶测试套件中测试使用Context.Consumer的React组件时遇到了一些不幸。

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"));
        });
        });

结果为“ TypeError：无法读取未定义的属性'Component'”。提供程序已经有一个默认的“正在加载”组件，问题不存在。

还尝试使用babel-rewire-plugin模拟带有虚拟组件的SidebarContext，然后得到的错误是：

不变违反：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

我的package.json具有：

"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"react": "^16.8.4",
"react-dom": "^16.8.4"

有任何想法如何使其正常工作吗？

使用酶测试React环境

0 个答案: