menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

Testing tables

January 30, 2020 at 6:56pm
Hi All I'm trying to assert how many rows are in a table It should be simple enough but I can't find a way to to queryXXX('tr') or equivalent It goes a bit againts the philosophy of testing library to test what the user can see, but counting rows is something users can do ^^ Any ideas ?

January 30, 2020 at 7:06pm
Hi! You can use ByRole query for that (https://testing-library.com/docs/dom-testing-library/api-queries#byrole). In the doc you can find a link to aria-query to see corresponding roles for different elements. You’ll find there that “row” work as role for a “tr” element.
Edited
  • reply
  • like

February 2, 2020 at 3:24pm
That makes perfect sense for proper table, thanks
  • reply
  • like
I did however spot one of our dependencies (react-table) has a markup like this
<div
class="rt-tbody"
style="min-width: 400px;"
>
<div
class="rt-tr-group"
role="rowgroup"
>
<div
class="rt-tr -odd"
role="row"
>
<div
class="rt-td"
role="gridcell"
style="flex: 100 0 auto; width: 100px;"
>
Do you have a good strategy for this ?
  • reply
  • like

February 3, 2020 at 4:12am
That do you want the test to prove?
  • reply
  • like
in this case, filtering assertions for a given collection and settings A we should see X rows for a given collection and settings B we should see Y rows
  • reply
  • like
Well, react-table is using the role "row" so you are still able to use the ByRole query. If you want to check number of rows rendered is as simple as using queryAll variant like expect(queryAllByRole('row')).toHaveLength(X)
Edited
like-fill
1
  • reply
  • like