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变量中创建的路由是否与以下内容匹配：

/
/富
/富/添加
/富/ 25

但不是路线：

/富/酒吧/ 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。

单元测试路由与React Router 2匹配

1 个答案: