Javascript 在酶中测试惰性负载成分

给定一个包含多个延迟加载路由的简单应用程序

import React, { lazy, Suspense } from "react";
import { Route } from "react-router-dom";
import "./styles.css";

const Component = lazy(() => import("./Component"));
const PageNotFound = lazy(() => import("./PageNotFound"));

export default function App() {
  return (
    <div className="App">
      <Route
        path="/component"
        exact
        render={() => (
          <Suspense fallback={<div>Loading..</div>}>
            <Component />
          </Suspense>
        )}
      />

      <Route
        path="*"
        render={() => (
          <Suspense fallback={<div>Loading..</div>}>
            <PageNotFound />
          </Suspense>
        )}
      />
    </div>
  );
}

import React，{lazy，suspent}来自“React”；
从“react router dom”导入{Route}；
导入“/styles.css”；
const Component=lazy（（）=>import（“./Component”）；
const PageNotFound=lazy（（）=>import（“./PageNotFound”）；
导出默认函数App（）{
返回(
(
)}
/>
(
)}
/>
);
}

如何进行测试以检查这些组件是否在该特定路径上呈现

以下是我尝试的App.test：

import { configure, shallow, mount } from "enzyme";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
import React from "react";
import { MemoryRouter } from "react-router-dom";
import App from "./App";
import Component from "./Component";
import PageNotFound from "./PageNotFound";

configure({ adapter: new Adapter() });

describe("App", () => {
  it("renders without crashing", () => {
    shallow(<App />);
  });

  it("renders lazy loaded PageNotFound route", () => {
    // Act
    const wrapper = mount(
      <MemoryRouter initialEntries={["/random"]}>
        <App />
      </MemoryRouter>
    );

    // Assert
    // expect(wrapper.containsMatchingElement(<PageNotFound />)).toEqual(true);
    // expect(wrapper.find(PageNotFound)).toHaveLength(1);
    expect(wrapper.exists(PageNotFound)).toEqual(true);
  });
});

从“酶”导入{configure，shallow，mount}；
从“@wojtekmaj/enzyme-Adapter-react-17”导入适配器；
从“React”导入React；
从“react router dom”导入{MemoryRouter}；
从“/App”导入应用程序；
从“/Component”导入组件；
从“/PageNotFound”导入PageNotFound；
配置（{adapter:newadapter（）}）；
描述（“应用程序”，（）=>{
它（“渲染而不崩溃”，（）=>{
请确保打开“测试”选项卡以查看失败的测试

非常感谢您的任何建议。
这是一个有趣的问题，很难找到最佳的模拟方法，因为
惰性（（）=>导入（'path/to/file'））
将函数作为参数，因此我们无法检测匿名函数的值

但我想我有一个解决方案给你，但不是最好测试所有的案例，而是测试一个特定的案例。你可以模拟如下：


mock（'react'，（）=>{
const React=jest.requireActual（'React'）；
//始终将子对象渲染为懒惰的模拟组件
常量悬念=（{children}）=>{
返回儿童；
};
常数lazy=（）=>{
//'require'组件，正如我们希望看到的那样
//为什么？以上原因
返回require（'./PageNotFound'）。默认值；
}
返回{
反应
懒惰的，
悬念
};
});

更新模拟
lazy
函数的新方法
我想我有一个更好的主意，调用
lazy
参数，然后作为组件返回，如下所示：

jest.mock（'react'，（）=>{
const React=jest.requireActual（'React'）；
常量悬念=（{children}）=>{
返回儿童；
};
const lazy=jest.fn（）.mockImplementation（（fn）=>{
常量组件=（道具）=>{
const[C，setC]=React.useState（）；
React.useffect（（）=>{
fn（）。然后（v=>{
国家经贸委（五）
});
}, []);
返回C？：空；
}
返回组件；
})
返回{
反应
懒惰的，
悬念
};
});

然后您必须等待组件更新，该组件在mock
lazy
中返回，因此我们等待组件重新绘制，如下所示：

//删除保留警告'act'
从'react dom/test utils'导入{act}；
//更新包装器的助手
常量waitForComponentToPaint=async（包装器）=>{
等待动作（异步（）=>{
等待新承诺（resolve=>setTimeout（resolve））；
wrapper.update（）；
});
};
它（“呈现PageNotFound”，异步（）=>{
常量包装器=装入(

您可以运行测试：
纱线测试--lazy
。并在
src/lazy
下浏览代码这是一个有趣的问题，很难找到最佳的模拟方法，因为
lazy（（）=>导入（'path/to/file'））
将函数作为参数，因此我们无法检测匿名函数的值

但我想我有一个解决方案给你，但不是最好测试所有的案例，而是测试一个特定的案例。你可以模拟如下：


mock（'react'，（）=>{
const React=jest.requireActual（'React'）；
//始终将子对象渲染为懒惰的模拟组件
常量悬念=（{children}）=>{
返回儿童；
};
常数lazy=（）=>{
//'require'组件，正如我们希望看到的那样
//为什么？以上原因
返回require（'./PageNotFound'）。默认值；
}
返回{
反应
懒惰的，
悬念
};
});

更新模拟
lazy
函数的新方法
我想我有一个更好的主意，调用
lazy
参数，然后作为组件返回，如下所示：

jest.mock（'react'，（）=>{
const React=jest.requireActual（'React'）；
常量悬念=（{children}）=>{
返回儿童；
};
const lazy=jest.fn（）.mockImplementation（（fn）=>{
常量组件=（道具）=>{
const[C，setC]=React.useState（）；
React.useffect（（）=>{
fn（）。然后（v=>{
国家经贸委（五）
});
}, []);
返回C？：空；
}
返回组件；
})
返回{
反应
懒惰的，
悬念
};
});

然后您必须等待组件更新，该组件在mock
lazy
中返回，因此我们等待组件重新绘制，如下所示：

//删除保留警告'act'
从'react dom/test utils'导入{act}；
//更新包装器的助手
常量waitForComponentToPaint=async（包装器）=>{
等待动作（异步（）=>{
等待新承诺（resolve=>setTimeout（resolve））；
wrapper.update（）；
});
};
它（“呈现PageNotFound”，异步（）=>{
常量包装器=装入(

您可以运行测试：
纱线测试--lazy
，并在
src/lazy
下浏览代码，如果我们有一条单独的路径，它确实可以很好地工作，但是如果我们有很多路径，我们最终会用
替换所有路径。我为您删除了另一个建议。它现在将所有
更新为
，因此在这些检查中，它仍然失败。尽管如此，非常感谢您的努力！如果您想直接测试新想法，我为它搭建了一个游乐场：不确定您遇到了什么问题，但我为您创建了一个
repl。它
，然后您可以跟踪您错过的内容。很抱歉，您是对的，这很有效！我错过了调用
waitFo的一点rComponentToPaint
异步-Everythi