Testing className with React Testing Library and Jest

Product Support
, ,
#1

How can get the classname by using React testing library get by classname method and Jest?

I’m new to JavaScript testing and working in a new codebase using Jest and React Testing Library. I need to write a test that verifies a specific className on an element. The test renders a <Button> component with a variant prop, and I want to ensure that the rendered element has a className equal to this variant.

Here’s my current test setup:

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />);
    // Need to check for className here
});

I’ve searched for a way to check for className similar to Enzyme’s hasClass but haven’t found a direct equivalent in React Testing Library. How can I achieve this using React Testing Library and Jest?

#2

Hey there! With my extensive experience in React testing, I can say that React Testing Library get by className can be quite handy. You can easily check for the presence of a className on an element by accessing its className property or using the classList API, just like you would in a browser environment.

Here’s how you can do it:


// Access className directly

const { container } = render(<Button variant="default" />);

expect(container.firstChild.className).toBe('default');

// Using classList API

expect(container.firstChild.classList.contains('default')).toBe(true);

If you find yourself frequently checking for classes, you can simplify your tests by adding jest-dom to your project. With jest-dom, you can use more expressive assertions like toHaveClass:


// Using jest-dom's toHaveClass matcher

expect(container.firstChild).toHaveClass('default');

This approach leverages familiar browser APIs and integrates well with Jest, making your tests more intuitive and readable.

#3

Absolutely, Madhurima! Building on your point, you can further streamline this process using React Testing Library get by className method and Jest. Here’s a refined way to achieve this:

Using toHaveClass from jest-dom:

import '@testing-library/jest-dom/extend-expect'; // Import jest-dom for extended matchers
import { render } from '@testing-library/react';
import Button from './Button'; // Import your Button component

it('Renders with a className equal to the variant', () => {
    const { getByRole } = render(<Button variant="default" />); // Render the component

    // Assert using toHaveClass matcher
    expect(getByRole('button')).toHaveClass('default');
});

This method makes your assertions more readable and concise, leveraging the power of jest-dom with React Testing Library get by className.

#4

Great insights, Dipen! To add a bit more depth, you can also directly use the classList API with React Testing Library get by className to check for the presence of a class:

import { render } from '@testing-library/react';
import Button from './Button'; // Import your Button component

it('Renders with a className equal to the variant', () => {
    const { getByRole } = render(<Button variant="default" />); // Render the component
    const buttonElement = getByRole('button'); // Get the button element

    // Check className using classList API
    expect(buttonElement.classList.contains('default')).toBe(true);
});

These methods give you a robust way to verify that the rendered <Button> component has the correct className based on the variant prop, using React Testing Library get by className and Jest.