使用Jest和React测试下拉列表

时间:2020-04-05 13:48:37

标签: reactjs jestjs dropdown react-bootstrap

我目前正在使用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';

谢谢。

1 个答案:

答案 0 :(得分:0)

按照步骤获取 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"));

瞧,您将获得项目列表。