我想用React jest对我的组件进行单元测试,测试它的onClick事件。我尝试了许多情况,但它们都没有覆盖到onClick语句。
这是我的组件
export default class HeaderCreate extends Component {
render() {
const { name, description, closeRightSection } = this.props;
return (
<div className="header">
<h1 className="header-text" title={name} data-testid="header">{name}</h1>
<p data-testid= "description-para">{description}</p>
<Tooltip title="Close Section">
<div className="icon-close">
<i className="material-icons" onClick={() => closeRightSection()} data-testid="id">close</i>
</div>
</Tooltip>
</div>
)
}
};
这是我的test.js文件
import React from 'react'
import { render } from "@testing-library/react";
import HeaderCreate from '../components/createHeader';
test("render header correctly", () => {
const { getByTestId } = render(<HeaderCreate name="My Name is Test"></HeaderCreate>);
expect(getByTestId('header').textContent).toBe('My Name is Test')
});
test("render Description Paragraph correctly", () => {
const { getByTestId } = render(<HeaderCreate description="Hi I am Description box"></HeaderCreate>);
expect(getByTestId('description-para').textContent).toBe('Hi I am Description box')
});
test("render close tooltip correctly", () => {
const { getByTestId } = render(<HeaderCreate closeRightSection=""></HeaderCreate>);
expect(getByTestId('id')).toBeTruthy();
});
在测试覆盖率中,所有的 onClick 事件会显示为未覆盖的语句,语句覆盖率为 66.67%。如何将其提高到 100%?我是 Reactjs 的新手,很困惑不知道该怎么做。我在各处搜索了解决方法,但没有找到。请给我建议,告诉我错在哪里。谢谢。
提前感谢。
i
标签元素并点击它吗? - Drew Reese