У меня проблемы с тестированием простой навигации, У меня есть приложение для реагирования, использующее response-router-dom, а компонент App окутан ожиданием. Я также динамически импортирую свои компоненты, чтобы иметь возможность разделить код.
По какой-то причине в модульном тесте, когда я нажимаю на навигационную ссылку «О программе» с домашней страницы. он всегда отображает 404 компонента NotFound, а не компонент about, который существует Что я делаю не так?
Main. js
const Main = () => <h1>Home page</h1>;
About. js
const About = () => <h1>About page</h1>;
NotFound. js
const NotFound = () => <div>404 this page does not exist</div>;
Nav. js
const Nav = () => (
<div className="dummy-nav">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</div>
);
App. js
import React, { Component, Suspense, lazy } from "react";
import { Switch, Route } from "react-router-dom";
import Nav from "./Nav";
const Main = lazy(() => import(/* webpackChunkName: "Main" */ "./Main"));
const About = lazy(() => import(/* webpackChunkName: "About" */ "./About"));
const NotFound = lazy(() =>
import(/* webpackChunkName: "About" */ "./NotFound")
);
class App extends Component {
render() {
return (
<Suspense fallback={<div>Loading...</div>}>
<div>This is the App</div>
<Nav />
<Switch>
<Route exact path="/" component={Main} />
<Route path="/about" component={About} />
<Route render={() => <NotFound />} />
</Switch>
</Suspense>
);
}
}
app.test. js
function renderWithRouter(
ui,
{
route = "/",
history = createMemoryHistory({ initialEntries: [route] }),
...renderOptions
} = {}
) {
// eslint-disable-next-line react/prop-types
function Wrapper({ children }) {
return <Router history={history}>{children}</Router>;
}
return {
...render(ui, { wrapper: Wrapper, ...renderOptions }),
history
};
}
test("renders homepage by default and can navigate to about", async () => {
renderWithRouter(<App />);
screen.getByText(/Home page/i);
const link = screen.getByRole("link", { name: /About/i });
userEvent.click(link);
await waitFor(() => screen.getByText(/About page/i));
screen.debug();
});
Вот песочница кода со сломанным тестом и структура приложения, которую я использую. Если у вас есть какие-либо советы по использованию и тестированию ленивого и динамического c импорта, поделитесь
https://codesandbox.io/s/react-router-suspense-lrnp7?file= / src / Прил. js