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

You can easily do that with react-testing-library.

First, you have to understand that container or the result of getByText etc. are merely DOM nodes. You can interact with them in the same way you would do in a browser.

So, if you want to know what class is applied to container.firstChild you can just do it like this container.firstChild.className.

If you read more about className in MDN you'll see that it returns all the classes applied to your element separated by a space, that is:

<div class="foo">     => className === 'foo'
<div class="foo bar"> => className === 'foo bar'

This might not be the best solution depending on your case. No worries, you can use another browser API, for example classList.

expect(container.firstChild.classList.contains('foo')).toBe(true)

That's it! No need to learn a new API that works only for tests. It's just as in the browser.

If checking for a class is something you do often you can make the tests easier by adding jest-dom to your project.

The test then becomes:

expect(container.firstChild).toHaveClass('foo')

There are a bunch of other handy methods like toHaveStyle that could help you.

As a side note, react-testing-library is a proper JavaScript testing utility. It has many advantages over other libraries. I encourage you to join the spectrum forum if you're new to JavaScript testing.

The library gives access to normal DOM selectors, so we can also simply do this:

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.getElementsByClassName('default').length).toBe(1);
});