Как проверить привязку Hrefs в меню antd с помощью библиотеки тестирования React

У меня проблемы с созданием модульных тестов, чтобы проверить, ведут ли мои ссылки href в моем меню Antd в нужные места. Я использовал antd Menu с SubMenu, которое содержит два раскрывающихся элемента. При нажатии на любой из них они переходят на соответствующие URL-адреса. Вот мой App.js:

import React from 'react';
import {Menu} from antd;

export default function App(){
    <Menu>
      <Menu.SubMenu key = 'google' title = {"Google Links}>
         <Menu.ItemGroup>
           <Menu.Item><a href = {https://www.google.com/}> Homepage Link </a></Menu.Item>
           <Menu.Item><a href = {https://www.google.com/imghp?hl=en}> Images Link</a</Menu.Item>
         </Menu.ItemGroup>
      </Menu.SubMenu>
    <Menu>
}

Вот что я пробую в своем модульном тесте App.test.js

describe('Google Links', ()=>{
   it('Links Work', () =>{
    const wrapper = shallow(<App/>);
    const menuFound = wrapper.find(Menu)
    menuFound.simulate('click',{key:'google'});
    expect(wrapper.find(Menu).at(0).props().href).toBe('https://www.google.com/');
    expect(wrapper.find(Menu).at(1).props().href).toBe('https://www.google.com/imghp?hl=en');
    });
});

Я также пробовал:

describe('Google Links', ()=>{
   it('Links Work', () =>{
    const {getByText} = render(<App/>);
    expect(getByText('Homepage Link')).toHaveAttribute('href','https://www.google.com/');
    expect(getByText('Images Link)).toHaveAttribute('href','https://www.google.com/imghp?hl=en');
    });
});

Ни один из этих методов не работает, и я чувствую, что перепробовал все, что мог найти в документации и других сообщениях о переполнении стека.


reactjs javascript jestjs react-testing-library antd
person Angela Rubchinksy    schedule 16.05.2021    source источник
comment
Я думаю, вы можете импортировать screen и сделать screen.getByText или screen.getByRole для ссылок. Это должно вернуть вам ссылку или, если вы хотите несколько, то getAll. Кроме того, если вы хотите отладить, лучше проверить, что возвращает getByText('Homepage Link'). Возможно, он не возвращает действительный элемент.   -  person jaybhatt    schedule 16.05.2021
comment
@jaybhatt Я получаю сообщение об ошибке: TestLibraryElementError: невозможно найти элемент с текстом: Ссылка на домашнюю страницу. Это может быть связано с тем, что текст разбит на несколько элементов. В этом случае вы можете предоставить функцию сопоставления текста, чтобы сделать сопоставление гибким.   -  person Angela Rubchinksy    schedule 16.05.2021

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых: подменю изначально скрыты, а дочерние элементы из них отсутствуют в VDOM, поэтому вам нужно запустить mouseover, чтобы отобразить элементы подменю: fireEvent.mouseOver(getByText('Google Links'));

Далее, firaEvent являются асинхронными, поэтому вам нужно дождаться его завершения, например: await waitFor(() => getByText('Homepage Link'));

И все вместе:

describe('Google Links', () => {
  it('Links Work', async () => {
    const { getByText } = render(<App />);

    fireEvent.mouseOver(getByText('Google Links'));
    await waitFor(() => getByText('Homepage Link'));

    expect(getByText('Homepage Link').href).toEqual('https://www.google.com/');
    expect(getByText('Images Link').href).toEqual('https://www.google.com/imghp?hl=en');
  });
});
person Kyr    schedule 16.05.2021
comment
Очень подробный и точный ответ :) - person jaybhatt; 17.05.2021
comment
Не могли бы вы взглянуть на мой последний вопрос в моем профиле и узнать, знаете ли вы, как это сделать? - person Angela Rubchinksy; 17.05.2021
comment
Вы также можете инициировать событие щелчка по своей ссылке, а затем следить за вызовами history.push: stackoverflow.com/a/61871929/2295549, чтобы быть ближе к тому, что сделал бы и увидел реальный пользователь (метод библиотеки тестирования реакции :). - person Florian Motteau; 18.05.2021