How to test a className with the Jest and React testing library

How to Test a className with Jest and React Testing Library

When working with JavaScript and React, it is crucial to ensure that your code is thoroughly tested. One common scenario is testing the presence of a specific className in a React component. In this blog post, we will explore how to accomplish this using Jest and React Testing Library.

Method 1: Using Jest’s `toHaveClass` Matcher

Jest provides a built-in matcher called `toHaveClass` that allows you to check if an element has a specific className. Here’s how you can use it:

  import { render } from '@testing-library/react';
  
  test('should have the correct className', () => {
    const { getByTestId } = render();
    const element = getByTestId('your-element');
    
    expect(element).toHaveClass('your-class');
  });
  

In the above code snippet, we render the component and retrieve the element using the `getByTestId` function from React Testing Library. Then, we use the `toHaveClass` matcher to assert that the element has the expected className.

Method 2: Using `querySelector` and `classList`

If you prefer a more manual approach, you can use JavaScript’s `querySelector` and `classList` methods to test the className. Here’s an example:

  import { render } from '@testing-library/react';
  
  test('should have the correct className', () => {
    const { container } = render();
    const element = container.querySelector('.your-class');
    
    expect(element.classList.contains('your-class')).toBe(true);
  });
  

In this method, we use `container.querySelector` to find the element with the className. Then, we use `classList.contains` to check if the className is present.

Conclusion

Testing the presence of a className in a React component is an essential part of ensuring code quality. In this blog post, we explored two different methods to achieve this using Jest and React Testing Library. Whether you prefer the built-in `toHaveClass` matcher or a more manual approach with `querySelector` and `classList`, both methods can help you verify the correctness of your component’s className.

Remember, thorough testing is crucial for building robust and reliable applications. By incorporating these techniques into your testing workflow, you can have confidence in the behavior of your React components.