reactjs - 使用 React Router 2 进行单元测试路由匹配

Question

我正在尝试为 React 应用程序添加单元测试，并想测试 React Router (2.0.1) 提供的路由。我想测试我提供的特定路径是否与路线匹配。我正在使用 Mocha 编写测试并期望。

我已经浏览了 React Router 存储库上的文档，但我能看到的唯一测试指南是解释如何测试 <Link />以及它是如何呈现的。

假设我有以下代码:

// import statements omitted for brevity

export const routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/foo">
            <IndexRoute component={FooIndex} />
            <Route path="add" component={FooAdd} />
            <Route path=":fooId" component={FooDetails} />
        </Route>
    </Route>
)

ReactDOM.render(
    <Router history={browserHistory}>{routes}</Router>,
    document.getElementById('app')
)

如何测试 routes 中创建的路由变量将匹配以下内容:

• /
• /foo
• /foo/添加
• /foo/25

但不是这样的路线:

• /foo/bar/12
• /栏

本质上，我想检查每个预期的 URL 格式是否都有与其匹配的路由，以及意外的 URL 是否与任何路由不匹配。

我对路由渲染的元素不感兴趣，所以不想将我的测试基于检查是否渲染特定的东西，只是找到匹配的路由，最好是某种检查方法它实际上是预期的路线(我猜想检查组件的名称是什么？)

非常感谢任何帮助。

谢谢

Answer 1

我们在 matchRoutes 测试中对此进行了测试:https://github.com/ReactTraining/react-router/blob/v3/modules/__tests__/matchRoutes-test.js

您可以遵循此模式。如果您无法通过引用识别路线，您确实也可以对渲染的组件进行断言。

由于 matchRoutes 未导出，您需要使用 match 帮助器(否则用于服务器端渲染)，并检查 renderProps.routes 或 renderProps.components。