时间戳

首页 > 解决方案 > 我将如何在 react-testing-library 中测试反应路由器路由参数？

javascript - 我将如何在 react-testing-library 中测试反应路由器路由参数？

问题描述

我正在使用 redux 和 react 路由器。

我想测试一个路由参数是否显示在页面上。

test('route param is displayed', async () => {
  const { queryByText } = customRender(
    <EditCard />,
    {
      route: '/card/1554990887217',
    }
  );
const cardId = queryByText(/1554990887217/);
await waitForElement(() => cardId);
})

我的自定义渲染像这样包装路由器和 redux：

export const customRender = (
  ui,
  {
    route = '/',
    history = createMemoryHistory({ initialEntries: [route] }),
    initialState,
    store = createStore(rootReducer, initialState),
    ...options
  } = {}
) => ({
  ...rtl(
    <Provider store={store}>
      <Router history={history}>{ui}</Router>
    </Provider>,
    options
  ),
  history,
});

路由参数只是没有出现在测试中。它只是超时错误。

但是它可以在页面上运行，如果我启动应用程序并手动测试它，一切都会按预期工作。

标签： javascriptreactjstestingreact-routerreact-testing-library

解决方案

弄清楚了。

我没有意识到您也需要传递路线。

const { queryByText } = render(
    <Route path="/card/:cardId">
      <EditCard />
    </Route>,
    {
      route: '/card/1554990887217',
    }
  );

如果您不使用 redux 或不想编写自定义渲染，这里有一种更简单的方法来执行此操作https://react-testing-examples.com/jest-rtl/react-router/

推荐阅读