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
# Svelte Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

Test a component that contains multiple components

February 2, 2020 at 1:40pm

Test a component that contains multiple components

February 2, 2020 at 1:40pm (Edited 2 months ago)
<div class="summary-bar-cell large-grow sc-fkyLDJ lnGkCP"> <div class="cell-title"> <span class="cell-title-key">Title 1</span> </div> <div class="tested-component"></div> </div>
<div class="summary-bar-cell large-grow sc-fkyLDJ lnGkCP"> <div class="cell-title"> <span class="cell-title-key">Title 2</span> </div> <div class="tested-component"></div> </div>
<div class="summary-bar-cell large-grow sc-fkyLDJ lnGkCP"> <div class="cell-title"> <span class="cell-title-key">Title 3</span> </div> <div class="tested-component"></div> </div>
I want to make sure that 'tested-component' on each of the cells is display the data correctly. How can I select the specific 'tested-component'? is there a way to do it without using data-testid? Maybe with the 'cell-title-key'?

February 2, 2020 at 3:36pm
I do believe data-testid is a good choice! Why would you want to avoid it?
like-fill
1
  • reply
  • like
I am new to the react testing library and as I understand I need to try to avoid using data-testid. Do you know to tell when it's good practice to use data-testid and when is not?
  • reply
  • like
you could see data-testid as your "last resort", meaning that it is not visible by the end user. This is why we suggest queries such as ByLabelText, which also assess a certain degree of accessibility. That being said, data-testid exist for a reason, so don't be afraid of using it – just try to figure out a more meaningful query first.
You mentioned you want to test that each cell displays the data correctly. Can you simply do something like getbyText()?
  • reply
  • like
That's what I did(getbyText()) but if I have let's say 3 cells that contains the same component and each of those components renders different data. So with getByText I can't be sure that the second cell didn't actually render the first cell data. thats why I am asking.
  • reply
  • like
I see. Then I'd say expect(getByTestId('whatever')).ToHaveTextContent('expected text') looks good enough :) you could even use your span titles as the data-testid key, so your tests are easier to read and understand.
  • reply
  • like
I tought to do: const cell = getByTestId(cellID); const {getByText} = within(cell); And then select what I want from the cell. What do you think?
  • reply
  • like
ah, sure – that really depends on the node you're querying with data-testid! Your solution looks fine too :)
like-fill
1
  • reply
  • like

February 3, 2020 at 4:17am
You could assign each tested component a role, getAllByRole, and then iterate over them testing in order
like-fill
1
  • reply
  • like