如何使用 Jest 和 React 测试库定位 listItem 中的映射链接？

问题描述

这有点挑战性，我在如何选择 ul 中的映射列表项以测试 url 是否正确的问题上苦苦挣扎

我创建了一个项目列表并将其映射到一个容器 ul 中，然后我找不到选择器“TabItem” 我想选择第一个元素以便找到它的 url 是否正确路由。 所以到目前为止我可以做的事情

import React from 'react';
import { fireEvent } from '@testing-library/dom';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react';
import 'mutationobserver-shim';
import { MemoryRouter } from 'react-router';
import SportTabrouter from '..';
global.window = Object.create(window);

Object.defineProperty(window,'location',{
  value: {
    href: '',},});
// const mockCancelTab = jest.fn(() => Promise.resolve());
// global.MutationObserver = window.MutationObserver;
describe('Sports Tab Router',() => {
  it('should change the link and render the content',async () => {
    const { getByRole } = render(
      <MemoryRouter>
        <SportTabrouter />
      </MemoryRouter>,);

  
    const link = getByRole('listitem');

    jest.usefaketimers();
    fireEvent.click(link);
    jest.runAllTimers();
    expect(true).toBe(true);
  });
});

Tab.test.tsx

const SportTabrouter: React.FC<IProps> = ({ children,tabList = disciplineList }) => {
  const [activeIndex,setActiveIndex] = useState(0);

  return (
    <div className="container sport-tab-container ">
      <div className="col-lg-10 mb-9 mb-lg-0">
        <ul
          data-testid="TabList"
          id="SVGnavIcons"
          className="nav nav-classic nav-rounded nav-shadow nav-justified border sport-list-container "
          role="tablist"
        >
          {tabList?.map((sport,index) => (
            <TabItem
              to={sport.link}
              inPlayEvent={sport.inPlayEvent}
              key={sport.title}
              icon={sport.icon}
              onClick={() => setActiveIndex(index)}
              isActive={activeIndex === index}
              title={sport.title}
            />
          ))}
        </ul>

        <div
          className="tab-content bg-dark text-light "
          style={{ border: '1px solid black',minHeight: '250px',borderRadius: '8px  ' }}
        >
          <div className="tab-pane fade pt-6" role="tabpanel" />
          {children}
        </div>
      </div>
    </div>
  );
};

export default SportTabrouter;

解决方法

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

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

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