如何解决如何使用 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 举报,一经查实,本站将立刻删除。