GetByRole не может найти элемент навигации в качестве навигации - PullRequest
Новая
       112

GetByRole не может найти элемент навигации в качестве навигации

0 голосов
/ 06 августа 2020

Мы пытаемся получить доступ в тесте к элементу по его роли, в данном случае это должно быть навигация, но getByRole ('navigation') не может его найти. Вот наш код: 

   return (
        <section data-testid="breadcrumb">
          <nav {...css(breadcrumb)}>
            <ol {...css(breadcrumbList)}>{createBreadcrumb()}</ol>
          </nav>
        </section>
      );

в результате HTML это: 

    <section>
<nav data-css-1makt9i="">
<ol data-css-kmaobz="">
<li data-css-1bfs1pf="">
<span class="link-style">Startseite</span></li>
<li data-css-1bfs1pf=""><span class="">Alle Säulen</span></li>
<li data-css-1bfs1pf=""><span class="">Meine Leistungen</span></li>
</ol>
</nav>
</section>

Элемент имеет неявную роль «навигация», но тест не может его найти, даже добавление роли вручную. То же самое происходит с результирующими ol и li, мы пытались добавить aria-label, чтобы идентифицировать каждый элемент li по-разному, но он не может найти его с помощью getByRole ('listitem', {name: 'NAME OF THE ARIA LABEL}), поэтому мы удалили его. Использование data-testid работает для section, но этого следует избегать в качестве передовой практики, и лучше сначала попытаться получить элемент, использующий роль. Кто-нибудь знает, почему в этих случаях не работают ролевая навигация и aria-label?

Ниже кода теста: 

import React from 'react';
import MyBenefits from '../MyBenefits';
import { render } from '../../utils/test-utlis';
import { fireEvent, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import moxios from 'moxios';
import { mockFetchUserRequests } from '../../utils/mock/mockRequests';
import { push } from 'react-router-redux';
import { store } from '../../store';
import { userType, getExplicitPageName } from '../../utils';

describe('when a logged user is in my benefits page ', () => {
  beforeEach(async () => {
    await mockFetchUserRequests();
    await store.dispatch(push(userType('/my-benefits')));
    render(<MyBenefits />, {});
  });

  afterEach(() => {
    moxios.uninstall();
  });
  console.log('test routing:', store.getState().routing.location);

  describe('has a valid heading so ', () => {
    it('should have the heading with a background image and a title', () => {
      let elementBanner = screen.getByRole('banner', { name: 'my-benefits' });
      let elmenentTile = screen.getByTestId('my-benefits-heading');

      expect(elementBanner).toBeInTheDocument();

      expect(elementBanner).toHaveStyle(
        `background: url('banner-background.png')`
      );

      expect(elementBanner).toContainElement(elmenentTile);
    });
  });

  describe('has a valid heading with buttons that  ', () => {
    it('should go to my retirement situation section ', () => {
      let element = screen.getByRole('button', {
        name: 'Meine Vorsorgesituation'
      });
      let scrollIntoViewSpy = jest.fn();
      HTMLElement.prototype.scrollIntoView = scrollIntoViewSpy;
      expect(element).toBeInTheDocument();
      fireEvent.focus(element);
      fireEvent.click(element);
      expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
    });

    it('should go to my benefits section ', () => {
      let element = screen.getByRole('button', { name: 'Meine Leistungen' });
      let scrollIntoViewSpy = jest.fn();
      HTMLElement.prototype.scrollIntoView = scrollIntoViewSpy;
      expect(element).toBeInTheDocument();
      fireEvent.focus(element);
      fireEvent.click(element);
      expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
    });

    it('should go to my financing section ', () => {
      let element = screen.getByRole('button', { name: 'Finanzierung' });
      let scrollIntoViewSpy = jest.fn();
      HTMLElement.prototype.scrollIntoView = scrollIntoViewSpy;
      expect(element).toBeInTheDocument();
      fireEvent.focus(element);
      fireEvent.click(element);
      expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
    });

    it('should go to my information section ', () => {
      let element = screen.getByRole('button', {
        name: 'Vertrags- und Planinformationen'
      });
      let scrollIntoViewSpy = jest.fn();
      HTMLElement.prototype.scrollIntoView = scrollIntoViewSpy;
      expect(element).toBeInTheDocument();
      fireEvent.focus(element);
      fireEvent.click(element);
      expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
    });
  });
  describe('has a valid breadcrumb ', () => {
    it('with a link to the home page and the name of the page', () => {
      expect(screen.getByRole('navigation')).toBeInTheDocument();
    });
  });
});

С уважением и благодарностью.

...