Programmatically set route in react-router for integration test

Viewed 183

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.

0 Answers
Related