我正在为反应组件(复选框)编写测试用例,因为我使用的是样式化组件,所以创建了多个类。现在的问题是我需要编写测试用例,以便能够检查特定的类名('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] UI 页面 [![在此处输入图像描述][2]][2] 测试结果 [1]:https://i.stack.imgur.com/ a3m0u.png [2]:https://i.stack.imgur.com/Ilvh6.png