DEV Community

Cover image for A Practical Guide to Testing React Applications (Unit Tests)

A Practical Guide to Testing React Applications (Unit Tests)

Victory Asokomeh on February 26, 2024

Introduction Test Driven Development (TDD) is a beneficial practice for engineers, but in reality, it's not always feasible. However, t...
Read full post
Collapse
 
wemmyo profile image
Wemimo •

Well done with the article 👏
Some feedback from me:

  • Use toBeVisible() instead of toBeInDocument(), because this checks that the text is actually visible rather than just being in the DOM.
  • I wouldn't recommend the use of test ID but instead use accessible attributes. For example with the Image component 
<img src="logo.png" alt="Company Logo" />
Enter fullscreen mode Exit fullscreen mode 
test('loads and displays the image', () => {
  render(<YourComponent />);
  const image = screen.getByAltText('Company Logo');
  expect(image).toBeVisible(); 
});
Enter fullscreen mode Exit fullscreen mode
  • I would also recommend using userEvent over fireEvent because it's a closer simulation to user behaviour
Collapse
 
victoryasokomeh profile image
Victory Asokomeh •

Thanks for the feedback @wemmyo.
I'm not sure I've come across toBeVisible() before now. I'll check it out!

Yes, definitely I will change the testID implementation.

I ran into some issues with userEvent where some tests were timing out after 5000ms (mostly the integration tests). I couldn't find a reliable way to increase this timeout.
I wasn't sure if the platform's config (codesandbox) contributed to this, I think changing this default value should work in a normal dev environment.