React testing library – how to get all instances of rendered components?

by

I want to get an access to all components that were rendered in the test. I need it, to read the props of those components.

Consider a ui with checkboxes. Each checkbox can be: checked/unchecked, have some background color and a dynamic size. It doesn’t make sense to add data-testid attribute to the dom nodes just to check if they are rendered correctly. I would end up with a lot of data-testid attributes, like:

data-testid="green-checked-12"
data-testid="green-checked-8"
data-testid="green-unchecked-10"
data-testid="blue-checked-16"
data-testid="yellow-unchecked-8"
...etc

Ideally I would like to get all instances of Checkbox component and check the props:

test("Checkbox", () => {
  it("renders correctly", () => {
    render(<Checkbox />);

    const checkboxComponents = findComponent(Checkbox); // unfortunately there is no such function exposed by testing-library

    expect(checkboxComponents).toEqual([
      { color: "green", checked: true, size: 12 },
      { color: "green", checked: true, size: 8 },
      { color: "green", checked: false, size: 10 },
      { color: "blue", checked: true, size: 16 },
      { color: "yellow", checked: false, size: 8 }
    ]);
  });
});

I’m not sure if that’s possible with react-testing library, or if there is any way to traverse the tree myself and check it.

104 thoughts on “React testing library – how to get all instances of rendered components?”

  14. This is the right webpage for anybody who wants to understand this topic.
    You understand so much its almost tough to argue with you (not that I personally would want
    to…HaHa). You definitely put a fresh spin on a subject that
    has been written about for years. Wonderful stuff, just excellent!

    Reply

  16. Hey just wanted to give you a quick heads up. The words in your post seem
    to be running off the screen in Safari. I’m not sure if this is a formatting issue or something to do
    with internet browser compatibility but I figured I’d post to let you know.

    The layout look great though! Hope you get the problem resolved soon. Thanks

    Reply

  18. Thank you a bunch for sharing this with
    all people you really recognize what you are speaking approximately!
    Bookmarked. Please additionally visit my website =). We can have a hyperlink trade
    contract among us

    Reply

  25. Hello there! I know this is kinda off topic however
    I’d figured I’d ask. Would you be interested in trading links
    or maybe guest writing a blog article or vice-versa? My site addresses a lot of the same topics
    as yours and I believe we could greatly benefit from each other.
    If you happen to be interested feel free to shoot
    me an email. I look forward to hearing from
    you! Superb blog by the way! cheap flights http://1704milesapart.tumblr.com/ cheap flights

    Reply
  43. Pingback: gay pnp chat dating
  61. Pingback: first person sex games

  90. Hello there! This post could not be written much better! Going through this post reminds me of my previous roommate!
    He always kept talking about this. I’ll send this information to him.
    Fairly certain he will have a great read. I appreciate you for
    sharing!

    Reply

  93. Tremendous things here. I am very satisfied to see your post.
    Thanks a lot and I’m taking a look ahead to touch
    you. Will you kindly drop me a e-mail?

    Reply

  99. My developer is trying to convince me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on a variety of websites for about a year and am concerned about switching to another
    platform. I have heard fantastic things about blogengine.net.
    Is there a way I can transfer all my wordpress posts into it?
    Any kind of help would be greatly appreciated!

    Reply

  100. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several e-mails with the same comment.
    Is there any way you can remove me from that service?
    Thanks!

    Reply

  101. Hi there! This is my 1st comment here so I just wanted to
    give a quick shout out and tell you I genuinely enjoy reading through your posts.
    Can you suggest any other blogs/websites/forums that
    go over the same topics? Thanks!

    Reply

Leave a Comment