Reactjs React测试库：如何测试包含useLocation（）的组件？_Reactjs_Testing_React Router_React Testing Library_Redwoodjs

Reactjs React测试库：如何测试包含useLocation（）的组件？

reactjs testing

Reactjs React测试库：如何测试包含useLocation（）的组件？,reactjs,testing,react-router,react-testing-library,redwoodjs,Reactjs,Testing,React Router,React Testing Library,Redwoodjs,我使用的是引擎盖下的React with React测试库。由于useLocation（）钩子，我正在努力测试一个组件（以及树中包含此组件的所有页面组件）在我的组件中使用useLocation（）hook时，我需要使用模拟浏览器位置历史的路由器包装我的测试组件，以防止出现错误error:Uncaught[TypeError:Cannot read property'pathname'of undefined] 但是，当我这样做时，导航组件不再完全呈现，因此我无法测试它。。。有什么想法吗 Nav

我使用的是引擎盖下的React with React测试库。由于useLocation（）钩子，我正在努力测试一个组件（以及树中包含此组件的所有页面组件）

在我的组件中使用

useLocation（）

hook时，我需要使用模拟浏览器位置历史的路由器包装我的测试组件，以防止出现错误

error:Uncaught[TypeError:Cannot read property'pathname'of undefined]

但是，当我这样做时，导航组件不再完全呈现，因此我无法测试它。。。有什么想法吗

Navigation.js 结果误差

导航›有一个“仪表板”导航菜单项
TestingLibraryElement错误：找不到角色为“button”的可访问元素
没有可访问的角色。但可能存在一些无法访问的角色。如果要访问它们，请将'hidden'选项设置为'true'。请在此处了解更多信息：https://testing-library.com/docs/dom-testing-library/api-queries#byrole

这方面运气好吗？

//import statements

const renderListItems = (pathname) => {
  const NavigationItems = [{..},{..},{..}] // example

  return NavigationItems.map((item) => {
    const selected = pathname.indexOf(item.path) ? false : true
    return (
      <ListItem
        button
        key={item.text}
        onClick={() => {
          navigate(item.route)
        }}
        selected={selected}
      >
        <ListItemText primary={item.text} />
      </ListItem>
    )
  })
}

const Navigation = () => {
  const { pathname } = useLocation() // this is why I need to wrap the Navigation component in a router for testing; I'm trying to get the current pathname so that I can give a specific navigation item an active state.

  return (
    <List data-testid="navigation" disablePadding>
      {renderListItems(pathname)}
    </List>
  )
}

export default Navigation

import { screen } from '@redwoodjs/testing'
import { renderWithRouter } from 'src/utilities/testHelpers'

import Navigation from './Navigation'

describe('Navigation', () => {
  it('renders successfully', () => {
    expect(() => {
      renderWithRouter(<Navigation />)
    }).not.toThrow()
  })
  it('has a "Dashboard" navigation menu item', () => {
    renderWithRouter(<Navigation />)
    expect(
      screen.getByRole('button', { text: /Dashboard/i })
    ).toBeInTheDocument()
  })
})

import { Router, Route } from '@redwoodjs/router'
import { createMemoryHistory } from 'history'
import { render } from '@redwoodjs/testing'
const history = createMemoryHistory()

export const renderWithRouter = (Component) =>
  render(
    <Router history={history}>
      <Route component={Component} />
    </Router>
  )

Navigation › has a "Dashboard" navigation menu item

TestingLibraryElementError: Unable to find an accessible element with the role "button"

    There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

    <body>
      <div />
    </body>