reactjs - 在单元测试中使用 getByRole 查找 Navlink

Question

在我的 React 测试库单元测试中，我无法按角色获取 Navlink。

getByRole('link', { name: 'help' }) - This fails

导航链接没有文本，而是有一个帮助图标，这似乎是问题所在。

我收到的错误是：

TestingLibraryElementError: Unable to find an accessible element with the role "link" and name "help"

Here are the accessible roles:

link:

Name "Home":
<a
class="active"
href="home"
name="home"
/>

Name "About":
<a
class="inactive"
href="/about"
name="about"
/>

Name "":          <--- No name for link with icon
<a
class="inactive"
href="/help"
name="help"
/>

我的导航栏：

const NavBar = () => {

  return (
    <>
        <div className="navbar">
            <ul>
                <li>
                  <NavLink to="home" className={({isActive}) => (isActive ? 'active' : 'inactive')}>Home</NavLink>
                </li>
                <li>
                  <NavLink to="about" className={({isActive}) => (isActive ? 'active' : 'inactive')}>About</NavLink>
                </li>
                <li>
                    <NavLink to="help" name="help" className={({isActive}) => (isActive ? 'active' : 'inactive')}><FaQuestionCircle size='1.5rem' className="helpicon"/></NavLink>
                </li>
            </ul> 
        </div>
    </>
  );
};

export default NavBar;

失败的单元测试：

describe(Navbar, () => {

    const mockedNavigation = jest.fn();
    
    it('should navigate to help page', () => {
        
        const { getByRole } = render(<Navbar />, { wrapper: Router });
        fireEvent.click(getByRole('link', { name: 'help' }));

        expect(mockedNavigation).toHaveBeenCalledWith(
            "help", 
            {
                preventScrollReset: undefined,
                relative: undefined,
                replace: false,
                state: undefined,
                unstable_viewTransition: undefined
            });
    });
});

如何选择没有文本但使用图标的导航链接？ 也许我可以使用 classNames ？添加额外的类以及活动/非活动？ 另一种方法会更容易并且更具可读性。

感谢任何帮助，再次感谢！

Answer 1

链接角色在技术上应该有效，但如果您在定位某个组件时遇到困难，您还有其他一些选择。

• 向元素添加

  data-testid

  属性并使用

  *byTestId

  查询。

  https://testing-library.com/docs/queries/bytesid

  const NavBar = () => {
    return (
      <div className="navbar">
        <ul>
          <li>
            <NavLink
              data-testid="link-home"
              to="home"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              data-testid="link-about"
              to="about"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              About
            </NavLink>
          </li>
          <li>
            <NavLink
              data-testid="link-help"
              to="help"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              <FaQuestionCircle size='1.5rem' className="helpicon" />
            </NavLink>
          </li>
        </ul> 
      </div>
    );
  };
  

  const { getByTestId } = render(<Navbar />, { wrapper: Router });
  fireEvent.click(getByTestId('link-help'));
  

• 您也可以随时在渲染的 container 上使用

  querySelector

  。

  https://testing-library.com/docs/queries/about#manual-queries

  const NavBar = () => {
    return (
      <div className="navbar">
        <ul>
          <li>
            <NavLink
              to="home"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              to="about"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              About
            </NavLink>
          </li>
          <li>
            <NavLink
              to="help"
              className={({ isActive }) => (isActive ? 'active' : 'inactive')}
            >
              <FaQuestionCircle size='1.5rem' className="helpicon" />
            </NavLink>
          </li>
        </ul> 
      </div>
    );
  };
  

  类似于

  "a[href='/help']"

  或

  "a[href='/help'].inactive"

  的查询：

  const { container } = render(<Navbar />, { wrapper: Router });
  fireEvent.click(container.querySelector("a[href='/help'].inactive"));
  

查看关于查询文档，根据实现或您在帖子中可能忽略的我们不知道的信息，您可能还可以使用其他选项。