Тестирование вкладок и компонентов вкладок

Question

При обновлении чистых функций с помощью нового декоратора React 16.6 memo() мы обнаружили, что меню навигации было повреждено, поскольку material-ui обрабатывает реквизиты в компоненте вкладок, о которых моя оболочка NavigationTabs не знает.

Чтобы обнаружить подобные ошибки в будущем, мы пытаемся консолидировать наш набор тестов, убедившись, что если щелкнуть вкладку и обновить компонент, новые свойства (например, 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

Как вы будете тестировать этот сценарий?