Question

我正在尝试为React / Redux应用程序编写一些集成测试，我希望能够将整个应用程序视为黑盒子。此时我有一个基本的测试设置，但加载时没有匹配的路由，应用程序保释。我的谷歌搜索让我在反应路由器中<MemoryRouter>，但我不知道如何使用它而不必在我的测试中重新定义我的路由器和路由。

这是我的App.tsx文件：

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;

和我的测试：

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将存在。

我是否有办法在测试中指定我要加载匹配/segment/123的路由，以便我的路由器呈现SomeContainer？

或者我可以将<SomeContainer/>加载到<Provider/>并完全跳过路由器，但我想在我的测试中尽可能多地封装实际的应用程序。

感谢任何帮助。

以编程方式在react-router中设置路由以进行集成测试

0 个答案: