小编ViG*_*rad的帖子

React-testing-library 与连接的反应路由器一起

我正在尝试使用 React 应用程序测试工作流。当所有字段都填满工作流程步骤时,用户可以单击“下一步”按钮。此操作在减速器中注册状态并更改 URL 以转到下一个工作流程步骤。

根据 RTL 文档,我使用此功能将测试中的组件包装在商店提供程序和连接的路由器中:

export const renderWithRedux = (ui: JSX.Element, initialState: any = {}, route: string = "/") => {
  // @ts-ignore
  const root = reducer({}, { type: "@@INIT" })
  const state = mergeDeepRight(root, initialState)

  const store = createStoreWithMiddleWare(reducer, state)
  const history = createMemoryHistory({ initialEntries: [route]})

  const Wrapper = ({ children }: any) => (
    <Provider store={store}>
      <ConnectedRouter history={history}>{children}</ConnectedRouter>
    </Provider>
  )
  return {
    ...render(ui, { wrapper: Wrapper }),
    // adding `store` to the returned utilities …
Run Code Online (Sandbox Code Playgroud)

reactjs redux react-redux react-testing-library connected-react-router

9
推荐指数
1
解决办法
815
查看次数