我目前正在使用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';
谢谢。
答案 0 :(得分:0)
按照步骤获取 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>
fireEvent.click(screen.getByText("Friends"));
瞧,您将获得项目列表。