如果单个元素中有多个类名，如何在 React 测试中获得正确的类名？

Question

我正在为反应组件（复选框）编写测试用例，因为我使用的是样式化组件，所以创建了多个类。 现在的问题是我需要编写测试用例，以便能够检查特定的类名（'checkbox__default'）。 下面是测试用例的代码：

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

这是反应组件的代码

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"]),
};

附上截图方便大家理解。

[![在此处输入图像描述][1]][1] 界面页面 [![在此处输入图像描述][2]][2] 测试结果 [1]：https://i.stack.imgur.com/a3m0u.png [2]：https://i.stack.imgur.com/Ilvh6.png

Answer 1

我自己的反应不是很熟练，但让我们试试吧：

这个类名：

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

会返回类似：checkbox checkbox__default，我假设您希望它是 checkbox__default。所以把它改成

className={getClassName(variant)}

或

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

会返回正确的值。

现在，由于您的测试不知道正确的 className 值，因此按层次结构查找它是有意义的：

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