使用 Jest 和 React 测试下拉菜单

Question

我目前正在使用 React 开发应用程序，但在编写测试时遇到问题。 我有这个下拉列表：

<DropdownButton variant="light" key={friend+"dropdown"} data-testid={friend+"dropdown"} title=""> 
   <Dropdown.Item target="_blank" href={friend} key={friend+"dropdownI1"} data-testid={friend+"dropdownI1"}>{t('manageFriends.viewProfile')}</Dropdown.Item>
   <Dropdown.Item onClick={(event) => deleteFriend(event,friend, webId)} key={friend+"dropdownI2"} data-testid={friend+"dropdownI2"}>{t('manageFriends.delete')}</Dropdown.Item>
   <Dropdown.Item onClick={(event) => viewRoutes(event,friend)} key={friend+"dropdownI3"} data-testid={friend+"dropdownI3"}>{t('manageFriends.viewRoutes')}</Dropdown.Item>
</DropdownButton>

我尝试测试一下，当您单击 DropdownButton 时，项目会出现：

test('Dropdown works', () =>{
  expect(getByTestId(friend+'dropdown')).toBeTruthy();
  fireEvent.click(getByTestId(friend+'dropdown'));
  expect(getByTestId(friend +'dropdownI1')).toBeTruthy();   
  expect(getByTestId(friend +'dropdownI2')).toBeTruthy();   
  expect(getByTestId(friend +'dropdownI3')).toBeTruthy();   
});

测试总是会找到 DropdownButton，但永远不会找到 Items。

我正在使用这两个库：react-testing-library 和 @testing-library/jest-dom/。我也在使用引导下拉菜单：

import DropdownButton from 'react-bootstrap/DropdownButton';

提前谢谢你。

Answer 1

按照步骤获取DropdownButton的项目：

1. 为 DropdownButton 添加标题。 例如：

<DropdownButton title="Friends" variant="light" key={friend+"dropdown"} data-testid={friend+"dropdown"} > 
   <Dropdown.Item target="_blank" href={friend} key={friend+"dropdownI1"} data-testid={friend+"dropdownI1"}>{t('manageFriends.viewProfile')}</Dropdown.Item>
   <Dropdown.Item onClick={(event) => deleteFriend(event,friend, webId)} key={friend+"dropdownI2"} data-testid={friend+"dropdownI2"}>{t('manageFriends.delete')}</Dropdown.Item>
   <Dropdown.Item onClick={(event) => viewRoutes(event,friend)} key={friend+"dropdownI3"} data-testid={friend+"dropdownI3"}>{t('manageFriends.viewRoutes')}</Dropdown.Item>
</DropdownButton> 

1. 根据 DropdownButton 的标题触发事件。

fireEvent.click(screen.getByText("Friends"));

瞧，你会得到物品清单。

Answer 2

这里你的错误是测试文件中的朋友变量应该是一个你没有定义的字符串值，这就是为什么 data-testid dosent 的运行时值匹配。

所以不要使用 freind，而是给它运行时存在的值。