reactjs - 如果单个元素中有多个类名,如何在 React 测试中获得正确的类名?
问题描述
我正在为反应组件(复选框)编写测试用例,因为我使用的是样式化组件,所以创建了多个类。现在的问题是我需要编写测试用例,以便能够检查特定的类名('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
解决方案
我对反应不是很熟练,但让我们试试:
这个类名:
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")
推荐阅读
- python - 无法打开 lib 'SQL Server Native Client 10.0' Python3,Linux ubuntu
- laravel - Laravel 的 Eloquent 和 Raw 查询的不同结果
- ios - 在 ios 中使用 mosquitto api 实现 Swift MQTT 协议
- java - 面临使用 selenium webdriver 处理两个以上窗口的问题
- java - 在 Java Web 应用程序中引发未知异常
- c# - 此函数只能在 Entity Framework 更新后由 LINQ to Entities 调用
- c++ - 如何检查 int 变量是否包含合法(不是陷阱表示)值?
- javascript - 在 PHP 中使用带有 CSS 和 JavaScript 的长 HTML 在 PhpStorm 中生成错误
- parsing - Haskell 解析递归和可能
- excel - Excel 自动化记录响应