Question

在使用新的React 16.6装饰器memo()更新纯函数时，我们发现导航菜单已损坏，因为material-ui处理了Tabs组件中的道具，而我的包装NavigationTabs并不知道。 / p>

为了将来发现这种错误，我们尝试通过确保如果单击选项卡然后更新组件，新属性（例如，selected = True）将被合并，以巩固我们的测试套件。按预期设置。

不幸的是，我们无法让他工作。请在下面找到我们的代码：

菜单组件

import React, {FC} from "react";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import history from "~/history";
import {MINISITE_TABS} from "~/constants";
import "./style.less";

const NavigationTabs: FC = () => (
  <Tabs
    className="minisite-navigation"
    onChange={(event, tablink) => history.push(tablink)}
    value={history.location.pathname}
  >
    {MINISITE_TABS.map(item => (
      <Tab
        label={item.label}
        value={item.link}
        key={item.label}
        disableRipple
      />
    ))}
  </Tabs>
);

export default NavigationTabs;

测试

import React from "react";
import {shallow} from "enzyme";
import history from "~/history";
import NavigationTabs from "../NavigationTabs";

describe("NavigationTabs Component", () => {
  const wrapper = shallow(<NavigationTabs />).dive();

  it("shows 4 tabs Navigation", () => {
    expect(wrapper).toMatchSnapshot();

    expect(wrapper.find("WithStyles(Tab)")).toHaveLength(4);
  });

  it("should change the page when a tab is clicked upon", () => {
    let tab = wrapper
      .dive()
      .find("WithStyles(Tab)")
      .first();
    expect(tab.prop("selected")).toBeFalsy();

    tab.simulate("click");
    wrapper.find("Tabs").simulate("change", {}, "/story/tab1");
    wrapper.update();
    expect(history.push).toHaveBeenCalledWith("/story/tab1");

    tab = wrapper
      .dive()
      .find("WithStyles(Tab)")
      .first();
    expect(tab.prop("selected")).toBeTruthy();
  });
});

错误

NavigationTabs Component
    ✓ shows 4 tabs Navigation (12ms)
    ✕ should change the page when a tab is clicked upon (14ms)                                              

  ● NavigationTabs Component › should change the page when a tab is clicked upon                            

    expect(received).toBeTruthy()

    Received: false

      29 |       .find("WithStyles(Tab)")
      30 |       .first();
    > 31 |     expect(tab.prop("selected")).toBeTruthy();                                                   
         |                                  ^
      32 |   });
      33 | });
      34 | 

      at Object.toBeTruthy (src/components/pages/MiniSite/Navigation/__tests__/NavigationTabs-test.js:31:34)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   1 passed, 1 total
Time:        1.968s, estimated 2s
Ran all test suites matching /NavigationTabs/i.

版本：

反应16.6.3
酶3.7.0
笑话23.6.0
Material-ui 3.1.2

您将如何测试这种情况？

测试选项卡和选项卡组件

0 个答案: