Ytukyg

While updating pure functions with the new React 16.6 decorator memo(), we found that the Navigation menu was broken, because material-ui handles props within the Tabs component, which my wrapper NavigationTabs isn't aware of.

In order to spot this kind of error in the future, we're trying to consolidate our test suite by making sure that if clicking on a tab, then updating the component, the new properties (eg selected=True) will be set as expected.

Unfortunately, we couldn't get his working. Please find our code below:

Menu Component

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;

Test

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();

  });

});

Error

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.

Versions:

• React 16.6.3


• Enzyme 3.7.0


• Jest 23.6.0


• Material-ui 3.1.2

How would you go about testing this scenario ?