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，但找不到项。

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

import DropdownButton from 'react-bootstrap/DropdownButton';

谢谢。

Answer 1

按照步骤获取 DropdownButton 的项目：

为 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>

根据 DropdownButton 的标题触发事件。

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

瞧，您将获得项目列表。

使用Jest和React测试下拉列表

1 个答案: