Jest酶测试ReactJS App组件加载并达到路由器错误

问题描述

我正在尝试测试包含整个应用程序的App组件。使用笑话和酶，我想断言#msin存在于

上，这是重定向后重定向路由器在'/'处加载的默认组件。但是我收到了一个未捕获的redirectRequest异常。

使用酶的dive（）我得到

   <App />

没有wrapper.dive（），使用酶I

 <ContextProvider value={{...}}>
  <App />
</ContextProvider>

当安装而不是浅时，我得到一个

Uncaught RedirectRequest { uri: '/dashboard' }

所以我从使用测试库的reach-router github示例中添加了renderWithRouter示例，我仍然得到了

   export const renderWithRouter = (
    ui: JSX.Element,{ route = `/`,history = createHistory(createMemorySource(route)) } = {}
 ): any => {
     return {
       ...render(<LocationProvider history={history}>{ui}</LocationProvider>),// adding `history` to the returned utilities to allow us
    // to reference it in our tests (just try to avoid using
    // this to test implementation details).
      history
   }
 }

 const wrapper = renderWithRouter(
        <Provider store={mockStore}>
            <App />
        </Provider>
    )
// still get Uncaught RedirectRequest { uri: '/dashboard' }

当前文件

describe(`App-component`,() => {
    it(`app loads`,() => {
        const mockStore = getStore({})
        const wrapper = shallow(
          <Provider store={mockStore}>
              <App />
           </Provider>
        ).dive()

    console.log(wrapper.find(`#msin`))

  })
})

app.ts

   const App = (): JSX.Element => {
        const { settings} = useSelector((state: rootState) => state)


   return (
       <ThemeProvider theme={themes}>
           <CssBaseline />
           <Router>
               <PublicRoute path="/*" component={Main} />
               <PublicRoute path="/login" component={Login} />
               <Redirect from="/" to="/dashboard" />
           </Router>
       </ThemeProvider>
      )
   }

main.ts

  return (
       <main className={classes.root} id={`msin`}>
           <Router>
               <Home="/home" />
           </Router>
       </main>
   )

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）