我正在尝试使用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 }
)
这里有什么问题的线索吗?