70

I am totally new to JavaScript testing and am 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 I couldn't find anything. How can I solve this with the current libraries (React Testing Library and Jest)?

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
Giesburts
  • 5,096
  • 10
  • 34
  • 70
  • 1
    You should use Enzyme, it's meant to work with jest for this very reason. Jest is great for testing functionality, Enzyme for component testing and rendering. – AnonymousSB Nov 20 '18 at 09:56
  • 1
    Following up on @AnonymousSB comment, Enzyme is great if you're more concerned with testing implementation, whereas the React Testing Library is for those taking a more user behavior-centric approach to testing. – James B. Nall Jul 14 '20 at 14:19

5 Answers5

119

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.

Giorgio Polvara - Gpx
  • 12,268
  • 5
  • 53
  • 55
  • Hey! I see that you are using `toBeTrue` but for some reason I get the `TypeError: expect(...).toBeTrue is not a function`. I run the latest Jest version. The `toHaveClass` is working fine! – Giesburts Nov 20 '18 at 11:22
  • My bad it's `toBe(true)` I fixed it. I use `toHaveClass` though, way easier – Giorgio Polvara - Gpx Nov 20 '18 at 14:47
  • 1
    Sorry I've never accepted this answer. It was indeed! – Giesburts Jun 05 '19 at 17:00
  • @GiorgioPolvara-Gpx I still think it's a hacky way to do it when the library doesn't have support for getByClass method. – Jaspreet Singh Jul 16 '19 at 05:26
  • The library doesn't have a `getByClass` method because it wants to push you to test as a user would. Users don't see classes. But if for some reason the rendered classes are something you want to test this is the way to do it. – Giorgio Polvara - Gpx Jul 16 '19 at 08:54
  • @GiorgioPolvara-Gpx how would you test multiple classes like the example `foo bar`? I tried to add `expect(container.firstChild.classList.contains('foo bar')).toBe(true)` but this fails, unless i'm missing something. – medev21 Feb 21 '20 at 23:57
  • 1
    You need to do it in two steps, one for `foo` and the other for `bar` – Giorgio Polvara - Gpx Feb 25 '20 at 14:18
  • strangly after an update `expect(container.firstChild).toHaveClass('foo')` no more works in some of my tests, `expect(container.firstChild.classList.contains('foo')).toBe(true)` yes – AlainIb Dec 04 '20 at 11:16
19

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 the react-testing-library philosophy as it includes 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 advised 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.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
kasongoyo
  • 1,179
  • 1
  • 10
  • 16
  • 47
    I've seen this answer given before here and from the authors of react-testing-library. I've never understood it. "classNames" are, by definition, things that users will see. They are at the very front lines of the user experience. It would be nice to know if a vital class helper has been applied to an element so that the element, for example, becomes visible. – mrbinky3000 Nov 26 '19 at 18:10
  • 2
    Adding to the above, some css libraries like semantic UI make the DOM more readable by looking at its CSS classes. So you have something like
    or a
    etc. Without querying by class its hard to assert when using sematic ui
     – sethu Jan 16 '20 at 20:54
  • 2
    @mrbinky3000 you can test the presence/absence of class in the element and that's very fine and well supported by RTL when used with [jest-dom](https://github.com/testing-library/jest-dom). What's ant-pattern is to locate the element by using className in tests. – kasongoyo Jan 17 '20 at 09:03
  • 1
    @mrbinky3000 Users can't see class names. Although in practice it's not always possible to test something without testing implementing details. – dan-klasson May 13 '20 at 13:14
  • 3
    Messing up the prod cod with data-testid is bigger no for me, than using the class attribute to browse in the rendered code. Not to mention that you don't really have a choice, if you want to check the render of a 3rd party code. Unless you want to mock out everything. Which about people are also making videos not to do. I think it's the case of great philosophy but not practical approach. – bmolnar Dec 24 '20 at 11:27
12

You can use testing-library/jest-dom custom matchers.

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

https://github.com/testing-library/jest-dom#tohaveclass

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

    expect(container.firstChild).toHaveClass('class-you-are-testing') 
})

This can be set up globally in a setupTest.js file

import '@testing-library/jest-dom/extend-expect';
import 'jest-axe/extend-expect';
// etc
glenrothes
  • 549
  • 1
  • 5
  • 16
10

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);
});
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
jbmilgrom
  • 11,549
  • 4
  • 21
  • 21
0
    // Link.react.test.js
import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import App from './../../src/App'
describe('React', () => {
  it('className', () => {
    const renderer = new ShallowRenderer();
    renderer.render(<App />);
    const result = renderer.getRenderOutput();
    expect(result.props.className.split(' ').includes('welcome-framework')).toBe(true);
  });
});
YinPeng.Wei
  • 65
  • 5