随着前端技术的不断发展，越来越多的前端工程师开始使用 React 和 Vue.js 来构建他们的应用程序。这些框架提供了一种优雅的方式来管理一个动态的单页应用，但是这也会带来一些挑战。其中之一就是如何在开发过程中测试路由的行为。
在本教程中，我们将学习如何使用 npm 包 @mikeljames/storybook-router 来测试路由。它是一个方便的工具，可以帮助您建立一个路由配置，并在 Storybook 中创建小部件，以演示每个路由的行为。
安装
首先，我们需要安装 npm 包@ mikaeljames / storybook-router
npm install --save @mikeljames/storybook-router
使用
现在我们已经安装了包，我们可以开始使用它来测试路由。首先，我们需要在我们的应用程序中定义我们的路由。假设我们的应用程序有两个页面：主页和关于页面，我们可以如下定义我们的路由：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ -------- ---- -------------
------ --------- ---- --------------
----- ------ - -
-
----- ----
---------- ---------
--
-
----- ---------
---------- ----------
--
--
------ ------- -------- ----------- -
------ -
--------
------------------- -- -
------ ---------------- ---------- --
---
---------
--
-这里我们使用了 React Router v5 来定义我们的路由。我们将这些路由放入一个数组中，并使用该数组创建路由表。我们的 AppRouter 组件根据路由表返回 <Switch> 组件的内容。
现在我们已经定义了我们的路由，我们可以将它们添加到我们的 Storybook 中。我们需要创建一个 Storybook Story，并在其中使用 <StoryRouter> 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -- ------ - ---- -------------------
------ - ----------- - ---- -------------------------------
------ -------- ---- ------------------
------ --------- ---- -------------------
------ ------- -
------ --------
----------- ----------------
--
------ ----- ---- - -- -- -
------- -----------------------
--------- --
---------
--
------ ----- ----- - -- -- -
------- ----------------------------
---------- --
---------
--在这个例子中，我们使用了 Storybook 的装饰器来为我们提供路由参数。然后，我们在每个 Story 中定义一个 <Router> 组件，并使用 initialEntries 属性设置路由。最后，我们将 <HomePage> 和 <AboutPage> 组件传递给 <Router> 组件。
通过这样做，我们现在可以在 Storybook 中测试我们的路由应用程序。您可以从 Storybook 的首页开始导航，找到和测试每个路由。
结论
在这篇文章中，我们学习了如何使用 npm 包@mikaeljames/storybook-router 来测试我们的路由应用程序。这被证明是一个很方便的工具，可以帮助我们在开发过程中测试不同路由之间的行为。我们使用了 React Router v5 并在 Storybook 中定义了我们的路由配置。通过这个工具，我们现在可以更轻松地测试我们的路由行为，更快地 debug 和 refactor 我们的应用程序。
示例代码
src/AppRouter.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ -------- ---- -------------
------ --------- ---- --------------
----- ------ - -
-
----- ----
---------- ---------
--
-
----- ---------
---------- ----------
--
--
------ ------- -------- ----------- -
------ -
--------
------------------- -- -
------ ---------------- ---------- --
---
---------
--
-stories/pages.stories.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -- ------ - ---- -------------------
------ - ----------- - ---- -------------------------------
------ -------- ---- ------------------
------ --------- ---- -------------------
------ ------- -
------ --------
----------- ----------------
--
------ ----- ---- - -- -- -
------- -----------------------
--------- --
---------
--
------ ----- ----- - -- -- -
------- ----------------------------
---------- --
---------
--src/HomePage.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ---------- -
------ -
-----
-------- ---------
---------- -- --- ---- ---------
------
--
-src/AboutPage.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ----------- -
------ -
-----
--------- ---------
---------- -- --- ----- ---------
------
--
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c0281e8991b448e5b41