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

Best way to test hidden by CSS class?

February 17, 2020 at 10:42am

Best way to test hidden by CSS class?

February 17, 2020 at 10:42am (Edited 1 month ago)
I have a component that contains some additional information that sometimes gets hidden. I do this by adding a css class to the additional information elements in the component.
<div>
<div className='additionalInfo'>
<div>foo</div>
<div>bar</div>
</div>
<div>
main content here
</div>
</div>
So given the philosophy of the library I wasn't sure of the best way to test this.
I can't get the text ("foo" or "bar" in this example) and then test it has the correct class as the class to hide gets added to the parent (the div with "additionalInfo" in this example). So then the test becomes expect(getByText('foo').parentElement).toHaveClass('hideMe') which feels a little bit too much like I'm testing the implementation.
I can't think of a better way other than hoisting this kind of test up to my functional/journey layer where I can use Cypress to actually test the visibility of the element.
Any other ideas or thoughts?
Thanks! Chris

February 17, 2020 at 10:47am
This depends on which styling technique you are using for your app. With css-in-js you can directly assert with toBeVisible matcher negated. But if you are using something like css modules, I'm afraid the styles themselves are not available in the test so you need to check something like your component has expected class, as you mentioned.
Edited
  • reply
  • like
This depends on which styling technique you are using for your app. With css-in-js you can directly assert with toBeVisible matcher negated. But if you are using something like css modules, I'm afraid the styles themselves are not available in the test so you need to check something like your component has expected class, as you mentioned.
I am indeed using css modules, I have however been interested in giving css-in-js a try... thanks for your reply!
  • reply
  • like
This is a downside when testing your components using css modules. I've been trying to find a solution for a while to get the styles inline for my tests, but couldn't find proper fix yet :(
  • reply
  • like
Testing the element has a class isn't great but I'm OK with it, the thing that really triggered me here was the fact I'm having to test the class exists on the parent 🤔
  • reply
  • like
Yeah, it doesn't feel right. I didn't find better approach for this tho.
like-fill
1
  • reply
  • like
Is there any reason why you don't want to simply use something like not.toBeInTheDocument/not.toHaveTextContent?
Edited
  • reply
  • like
The problem is the elements are in the DOM (so not.toBeInTheDocument/not.toHaveTextContent can't be used as the elements/texts are there), but they are hidden by a css rule (so you need proper css files to be loaded inline with the elements tested, but that doesn't happen with css modules).
  • reply
  • like
it's as says the elements are in the DOM just hidden via CSS.
For context, the reason I do this instead of not rendering them is because the problem is visual. I'm adding items to a team build dashboard and If too many items get added they become too small so hiding the additional info helps the more important info stand out better.
Thanks for your reply!
Edited
  • reply
  • like
Also for reference I decided to add a test ID to the parent and use that in the test expect(getByTestId('additional-info')).toHaveClass('hideMe') as I felt it was more obvious the test ID was important for a test if the component was refactored.
like-fill
1
  • reply
  • like
it's as says the elements are in the DOM just hidden via CSS.
For context, the reason I do this instead of not rendering them is because the problem is visual. I'm adding items to a team build dashboard and If too many items get added they become too small so hiding the additional info helps the more important info stand out better.
Thanks for your reply!
Ahh gotcha. From what I remember, it's not really possible to do with JSDOM. Cypress can do a lot more in terms of visibility, for example, so you might want to look for other solutions or invent some workaround.
like-fill
1
  • reply
  • like