Блог

Я пытаюсь выполнить тест моментального снимка компонента. Дочерний компонент использует вкладку из пользовательского интерфейса material, однако каждый раз, когда я запускаю тест, каждый раз появляется ошибка TypeError: Не удается прочитать свойство «местоположение» неопределенного. Я попытался ввести местоположение в родительский компонент, но безрезультатно.

Тестовый код:

 import React from "react";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { render, cleanup } from "@testing-library/react";
import configureMockStore from "redux-mock-store";
import "@testing-library/jest-dom/extend-expect";

//import components
import MyProcessInstance from "../MyProcessInstance";

afterEach(cleanup);

const mockStore = configureMockStore();
let store = mockStore({
  data: { 
    userID: "100" 
  },
  ui: { 
    userObj: {
      user: {
        given_name: "name"
      }
    }
  }
});
let location = {
  pathname: "/home/my_workspace"
}

describe("Test suites for MyProcessInstance", () => {
  it("renders amp; matches snapshot", () => {
    const { asFragment } = render(
      <Provider store={store}>
        <BrowserRouter>
          <MyProcessInstance location={location}/>
        </BrowserRouter>
      </Provider>    
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

 

Ошибка, которую я получаю:

  ● Test suites for MyProcessInstance › renders amp; matches snapshot

    TypeError: Cannot read property 'location' of undefined

      24 |   };
      25 | 
    > 26 |   const [selectedTab, setSelectedTab] = React.useState(indexToTabName[history.location.pathname]);
         |                                                                               ^
      27 | 
      28 |   const handleChange = (event, newValue) => {
      29 |     setSelectedTab(newValue);

 

Дочерний компонент MyProcessInstance

 import React from "react";
import { Tabs, Tab } from "@material-ui/core";
import "./Navigation.scss";
import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";

export default function Navigation({ name, props }) {

  const { history } = props;
  
  const tabNameToIndex = {
    0: "my_workspace",
    1: "my_process_instance",
    2: "catalog",
    3: "workflow_reports",
    4: "process"
  };

  const indexToTabName = {
    "/home/my_workspace" : 0,
    "/home/my_process_instance": 1,
    "/home/catalog": 2,
    "/home/workflow_reports": 3,
    "/home/process": 4,
  };

  const [selectedTab, setSelectedTab] = React.useState(indexToTabName[history.location.pathname]);

  const handleChange = (event, newValue) => {
    setSelectedTab(newValue);
    history.push(`/home/${tabNameToIndex[newValue]}`)
  };

  return ( 
    <div className="Nav-Title">
      <div className="row">
        <AccountTreeOutlinedIcon className="Nav-Icon" />
        <div className="Nav-Name-01">Workflow</div>
        <div className="Nav-Name-02">Manager</div>
        <Tabs
          className="Nav-Tab-List"
          value={selectedTab}
          indicatorColor="primary"
          textColor="primary"
          onChange={handleChange}          
        >
          <Tab label ="My WorkSpace" className="Nav-Tab" />
          <Tab label ="My Process Instance(s)" className="Nav-Tab" />
          <Tab label ="Catalog" className="Nav-Tab"/>
          <Tab label ="Reports" className="Nav-Tab" />
          {name === "process" ? (
            <Tab label ="My Process Instance Manager" className="Nav-Tab" />
          ) : null}
        </Tabs> 
      </div>
    </div>   
  );
}