Jest 单元测试 onClick 事件
Jest Unit testing onClick event
我有一个组件,想用 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();
});
在 Coverage 中,它显示所有 onClick 事件作为未涵盖的语句。语句覆盖率为 66.67%。我怎样才能使它 100%..?我是 Reactjs 的新手。所以我很困惑现在该怎么做。我在各个地方进行了搜索,但没有找到任何解决方案。请指出我错在哪里
提前致谢
看来您需要编写一个测试来模拟点击 i
元素。您可以使用 RTL 中的 fireEvent
助手来完成此操作。创建一个模拟回调以传入 props,定位 id
测试 ID 并模拟点击并断言调用了回调。
import { render, fireEvent } from '@testing-library/react';
...
test("should call closeRightSection callback", () => {
const closeRightSectionSpy = jest.fn();
const { getByTestId } = render(
<HeaderCreate closeRightSection={closeRightSectionSpy} />
);
fireEvent.click(getByTestId('id'));
expect(closeRightSectionSpy).toHaveBeenCalled();
});
我有一个组件,想用 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();
});
在 Coverage 中,它显示所有 onClick 事件作为未涵盖的语句。语句覆盖率为 66.67%。我怎样才能使它 100%..?我是 Reactjs 的新手。所以我很困惑现在该怎么做。我在各个地方进行了搜索,但没有找到任何解决方案。请指出我错在哪里
提前致谢
看来您需要编写一个测试来模拟点击 i
元素。您可以使用 RTL 中的 fireEvent
助手来完成此操作。创建一个模拟回调以传入 props,定位 id
测试 ID 并模拟点击并断言调用了回调。
import { render, fireEvent } from '@testing-library/react';
...
test("should call closeRightSection callback", () => {
const closeRightSectionSpy = jest.fn();
const { getByTestId } = render(
<HeaderCreate closeRightSection={closeRightSectionSpy} />
);
fireEvent.click(getByTestId('id'));
expect(closeRightSectionSpy).toHaveBeenCalled();
});