test-library to verify aria-expanded value as false

Question

I have one component render a flyout as following HTML code once flyout is opened. I would like to write the test using test-library to verify the aria-expanded value is false after clicking the flyoutItem. is there any better way for me to verify the aria-expanded?

// component
    <body>
      <div>
        <div >
          <button aria-expanded="true" class="btn">
            Flyout button
          </button>
          <div class="flyoutContainer>
            <ul class="flyoutItem" role="listbox" >
              <li aria-selected="false" class="item" role="option" >
                <div class="option" >
                    <span >Data is here</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </body>

// test

render(<flyout />);

const item = screen.getByText(/Data is here/, {selector: 'span'});
fireEvent.click(item);

const flyoutButton = screen.getByRole('button', {name: 'Flyout button'});
expect(flyoutButton).toHaveClass('aria-expanded').;
expect(flyoutButton).toHaveAttribute('aria-expanded', 'false')

Answer 1

You could use getByRole() option expanded: false like this

expect(
    screen.getByRole("button", {
        name: "Flyout button",
        expanded: false,
    })
).toBeInTheDocument();

test-library to verify aria-expanded value as false

Question

1 answers

solution1
0 2022-05-19 11:26:49

test-library to verify aria-expanded value as false

Question

1 answers

solution1 0 2022-05-19 11:26:49

solution1
0 2022-05-19 11:26:49