testing-library / testing-library/react-testing-library

Provide example of how to test <details><summary>...

Open
#1,405 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Description

Relevant code or config:
<details>
<summary>accordion item 1</summary>
some accordion 1 content
</details>

or i like this example from mn docs

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>
What you did:

I have been trying to find an example of how to capture a user's click on a summary of the <details> for an accordion.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details

What happened:

I was expecting to be able to use getByRole but it doesn't appear to take the details or summary as a role, it does capture the details under group but it feels like the name should be the text in the summary? details could take a name but we fear that could end up with wacky side effects?

I am looking to test basic behavior like the accordion is expanded while the others are collapsed.

thanks.

Reproduction:

use the mdn example above and then provide an example of how you were able to test it using native RTL. We came up with a work around using a toggle simulation, but i would really like to use get by role and have the user just click the summary

Problem description:
Suggested solution:

can we use getbyrole to trigger the user's action on the summay?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue includes an MDN

accordion example; start by reproducing it with React Testing Library and checking which roles getByRole exposes. Document a native RTL test that clicks the summary and verifies one details element is expanded while the others are collapsed, or clarify whether a library change is required.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, frontend, testing
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.