微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决使用酶在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 举报,一经查实,本站将立刻删除。