Question

我正在尝试使用React应用测试工作流程。当所有字段都填写了工作流程步骤时，用户可以单击“下一步”按钮。此操作会在化简器中注册状态，然后更改URL转到下一个工作流程步骤。

According to the RTL documentation，我使用以下功能将待测组件包装在商店提供商和连接的路由器中：

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 to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    history,
    store
  }
}

与文档中不同，我不是使用connected-react-router，而是使用react-router-dom，但是我看到有些人在网络上将connected-react-router与RTL一起使用，所以我认为这不是问题从这里来。

被测组件包装在withRouter函数中，我通过连接的反应路由器push函数刷新URL，并通过redux connect函数进行分派：

export default withRouter(
  connect<any, any, any>(mapStateToProps, mapDispatchToProps, mergeProps)(View)
)

在生产中一切正常，但是当我在“下一步”按钮上触发click事件时，页面不会刷新。这是我的测试代码（为方便您阅读，我已填写所有字段并启用“下一步”按钮）：

    const {
      container,
      queryByText,
      getAllByPlaceholderText,
      getByText,
      debug,
      getAllByText
    } = renderWithRedux(<Wrapper />, getInitialState(), "/workflow/EXAC")

    await waitForElement(
      () => [getByText("supplierColumnHeader"), getByText("nextButton")],
      { container }
    )

    fireEvent.click(getByText("nextButton"))

    await waitForElement(
      () => [getByText("INTERNAL PARENT"), getByText("EXTERNAL PARENT")],
      { container }
    )

这里有什么问题的线索吗？

带有连接的React Router的React-Testing-Library

0 个答案: