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

Posted 2023-02-21

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

【英文标题】：How to get the correct classname in React testing if there are multiple classnames in a single element?

【发布时间】：2021-11-10 13:36:25

【问题描述】：

我正在为反应组件（复选框）编写测试用例，因为我使用的是样式化组件，所以创建了多个类。 现在的问题是我需要编写测试用例，以便能够检查特定的类名（'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

【参考方案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")

【讨论】：

对不起，这个答案没有用。您不能仅仅将类名从实现中排除以使测试绿色。我们可以假设需要checkbox 来应用所有复选框通用的任何样式，而checkbox__default 是默认变体的类。