使用酶在ReactJS中测试惰性负载组件和React Router

问题描述

我有AllRoute组件，其中所有的Route组件都是延迟加载的。我想测试路由路径是否映射到AllRoute组件中的特定组件（例如About组件）。我使用以下方法在AllRoute组件中找到路由对象的数组，并希望检查路径是否映射到我指定的组件。

let pathMap = [];
describe("all the test of AllRoute page",() => {
  beforeAll(() => {
    const component = mount(
      <browserRouter>
        <AllRoute />
      </browserRouter>
    );
    pathMap = component.find(Route).reduce((pathMap,route) => {
      const routeProps = route.props();
      pathMap[routeProps.path] = routeProps.component;
      return pathMap;
    },{});
    console.log(pathMap);
  });
  it("should show About component for / router",() => {
     expect(pathMap["/"]._result).toBe(About);
  });//test case passed

  it("should show Login component for Login router",() => {
     expect(pathMap["/Login"]._result).toBe(Login);
  }); //Test Case Failed
});

我做console.log(pathMap)时显示为

 {
      '/': {
        '$$typeof': Symbol(react.lazy),_ctor: [Function],_status: 1,_result: [Function: About]
      }
 }

对于第二种情况，当我进行npm测试时，它显示为undefined。

 TypeError: Cannot read property '_result' of undefined

如何在我的案例中测试第二个测试用例？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）