How to test a className with Jest and React testin

Question

I am totally new to JavaScript testing and working in a new codebase. I would like to write a test that is checking for a className on the element. I am working with Jest and react-testing-library. Below I have a test that will render a button based on the variant prop. It also contains a className and .I would like to test that.

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

I tried to google for a property like Enzyme has with hasClass but couldn't find anything. Does anyone know how to solve this with current libraries (react-testing-library, Jest)?

Answer 1

At first you should use a proper JavaScript Testing utility, such as:

• Enzyme;
• Chai (Chai-Enzume);
• so on...

Those libraries will provide you several methods to assert your application, so you could simply assert your current case like this:

With Enzyme:

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

Documentation: Enzyme hasClass

---

With Chai-Enzyme:

const wrapper = mount(<MyComponent />);

expect(wrapper.find('span')).to.have.className('child');
expect(wrapper.find('span')).to.not.have.className('root');

Documentation: chai-enzyme className

Answer 2

You need to understand the philosophy behind react-testing-library to understand what you can do and what you can't do with it;

The goal behind react-testing-library is for the tests to avoid including implementation details of your components and rather focus on writing tests that give you the confidence for which they are intended.

So querying element by classname is not aligned with react-testing-library philosophy as it include implementation details, the classname is actual the implementation detail of an element and is not something the end user will see and it is subjected to change at anytime in the lifecycle of the element. So instead of searching element by what user cannot see, and something that can change at anytime, just try to search by using something that the user can see such as text, label or something that will remain constant in the life cycle of the element like data-id.

So to answer your question, it is not adviced to test classname and hence you cannot do that with react-testing-library. Try with other test libraries such as enzyme or react-dom test utils

Answer 3

As mentioned by other people, you would need to use enzyme. Do set up enzyme for your application before trying out the code structure below.

A simple example to how to use hasclass

import React from 'react'

import CreateCode from 'modules/ReferralPage/components/CreateCode.js'

import { shallow } from 'enzyme';

describe('<CreateCode /> component tests', () => {

it('Shallow renders CreateCode component', () => {
    const wrapper = shallow(<CreateCode />).dive();
    expect(wrapper.hasClass('container')).toEqual(true);
});

});

Apologies for the formatting

Answer 4

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.