9

我正在尝试使用 React 应用程序测试工作流程。当所有字段都填充有工作流步骤时，用户可以单击“下一步”按钮。此操作在 reducer 中注册状态并更改 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 to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
    history,
    store
  }
}

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

被测组件封装在一个withRouter函数中，我通过连接的 react 路由器函数刷新 URL push，通过 reduxconnect函数调度：

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 }
    )

这里出了什么问题的任何线索？

4

0 回答 0