javascript - test-library to verify aria-expanded value as false

I have one ponent 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?

// ponent
    <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')

// ponent
    <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')

Share Improve this question asked Sep 21, 2021 at 1:08 jacobcan118 9,10916 gold badges60 silver badges119 bronze badges

1 Unless you are dynamically adding a custom class named aria-expanded and you want to test that is being added correctly, the first assertion (...toHaveClass) wouldn't be necessary. Other than that, I don't see the problem. Are you getting an error? – pazitos10 Commented Sep 21, 2021 at 3:02

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - test-library to verify aria-expanded value as false - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)