I am trying to write some integration tests for a React/Redux app and I would like to be able to treat my entire app as a blackbox. At this point I have a basic test setup but when it loads there is no matching route and the app bails. My Googling has led me to <MemoryRouter> in react-router but Im unclear on how to use it without having to re-define my router and routes inside of my test.
Here's my App.tsx file:
import * as React from "react";
import * as ReactRouter from "react-router-dom";
import { SomeContainer } from "./Container";
import "./App.css";
const { BrowserRouter, Route } = ReactRouter;
class App extends React.Component<{}, {}> {
render() {
return (
<BrowserRouter>
<div className="app">
<Route
exact={true}
path="/segment/:id"
component={SomeContainer}
/>
</div>
</BrowserRouter>
);
}
}
export default App;
and my test:
import { mount } from "enzyme";
import * as React from "react";
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";
import App from "./App";
describe("/src/App", () => {
it("should render", () => {
const mockStore = configureMockStore([]);
const store = mockStore({});
const wrapper = mount(
<Provider store={store}>
<App />
</Provider>
);
wrapper.find(".some-css-selector").simulate("click");
...make some assertions
});
});
.some-css-selector will exist if the correct route is matched but currently it is not found.
Is there a way for me to specify in the test that I want to load the route that matches /segment/123 so that my router will render SomeContainer?
Alternatively I could just load <SomeContainer/> into the <Provider/> and skip the router altogether, but I'd like to encapsulate as much of the actual app as I can in my tests.
Any help is appreciated.