How to get the correct classname in React testing if there are multiple classnames in a single element?

Question

I am writing a test case for a react component(Checkbox), Since, I am using a styled component there are multiple classes created. Now the problem is I need to write the test case such that I should be able to check a particular classname('checkbox__default'). Here is the code for test case:

describe("Checkbox variant", () => {
    it("Default variant", () => {
      render(<CheckBox variant="default" label="default variant" />);
      const checkbox = screen.getByText("default variant");
      expect(checkbox).toHaveClass("checkbox__default");
    });
  });

Here is the code for the react component

import React from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
import { Wrapper } from "../../atoms";

const Input = styled.input``;
const Label = styled.label``;
// const baseClass = "checkbox";

const getClassName = (variant) => {
  switch (variant) {
    case "primary":
      return "checkbox__primary";
    case "secondary":
      return "checkbox__secondary";
    default:
      return "checkbox__default";
  }
};

export const CheckBox = ({ checked, handler, label, variant }) => (
  <Wrapper className={`checkbox ${getClassName(variant)}`}>
    <Label aria-label={label}>
      <Input type="checkbox" checked={checked} onChange={handler} />
      {label}
    </Label>
  </Wrapper>
);

CheckBox.defaultProps = {
  checked: false,
  handler: () => {},
  label: "",
  variant: "default",
};

CheckBox.propTypes = {
  label: PropTypes.string,
  checked: PropTypes.bool,
  handler: PropTypes.func,
  variant: PropTypes.oneOfType(["default", "primary", "secondary"]),
};

Attaching screenshots for more clear understandings.

[![enter image description here][1]][1] UI page [![enter image description here][2]][2] test result [1]: https://i.stack.imgur.com/a3m0u.png [2]: https://i.stack.imgur.com/Ilvh6.png

score 1 · Answer 1 · answered Jul 06 '22 at 22:07

A bit late to the party but it might be useful for somebody else whenever an element has several classes and you want to assert all or only one of them to have certain class(es):

in the component

<button className='checkbox__default bg-red-400'>A button</button>

in the test

const button = screen.getByText('A Button');
const buttonAttributes = button.getAttribute('class');
expect(buttonAttributes).toContain('checkbox__default);

score 0 · Answer 2 · answered Sep 15 '21 at 13:08

I'm not quite skilled myself with react, but let's try:

The className in this:

className={`checkbox ${getClassName(variant)`}

would return something like: checkbox checkbox__default and I assume you want it to be checkbox__default. So changing this to

className={getClassName(variant)}

or

className={`${getClassName(variant)}`}

would return the correct value.

Now, since your test doesn't know the the proper className value it would make sense to find it by hierarchy:

const { container } = render(<Checkbox variant={"default"}.../>)
expected(container.firstChild).toHaveClass("checkbox__default")

Sorry but that answer is not useful. You cannot just leave classnames out from the implementation to get the test green. We can assume that `checkbox` is needed to apply any styles that are common to all checkboxes, and `checkbox__default` is the class for the default variant. — Martin, Sep 15 '21 at 13:15

How to get the correct classname in React testing if there are multiple classnames in a single element?

2 Answers2