reactjs - React 测试库:测试属性/prop
问题描述
我正在使用 TypeScript 编写一个 React 应用程序。我将 material-ui 用于我的组件,将 react-testing-library 用于我的单元测试。
我正在为 material-ui 的 Grid 组件编写一个包装器,这样我总是有一个项目。
import Grid from "@material-ui/core/Grid";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import React, { PureComponent } from "react";
import styles from "./styles";
export interface OwnProps {
className?: string;
}
export interface Props extends WithStyles<typeof styles>, OwnProps {}
export interface DefaultProps {
className: string;
}
export class GridItem extends PureComponent<Props & DefaultProps> {
static defaultProps: DefaultProps = {
className: ""
};
render() {
const { classes, children, className, ...rest } = this.props;
return (
<Grid
data-testid="grid-item"
item={true}
{...rest}
className={classes.grid + " " + className}
>
{children}
</Grid>
);
}
}
export default withStyles(styles)(GridItem);
我想编写一个单元测试来检查item={true}
. 我尝试toHaveAttribute
像这样使用辅助库 jest-dom:
import "jest-dom/extend-expect";
import React from "react";
import { cleanup, render } from "react-testing-library";
import GridItem, { OwnProps } from "./GridItem";
afterEach(cleanup);
const createTestProps = (props?: object): OwnProps => ({
...props
});
describe("Parallax", () => {
const props = createTestProps();
const { getByTestId } = render(<GridItem {...props} />);
describe("rendering", () => {
test("it renders the image", () => {
expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
});
});
});
但是这个测试失败了:
● GridItem › rendering › it renders the image
expect(element).toHaveAttribute("item", "true") // element.getAttribute("item") === "true"
Expected the element to have attribute:
item="true"
Received:
null
14 | describe("rendering", () => {
15 | test("it renders the image", () => {
> 16 | expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
| ^
17 | });
18 | });
19 | });
at Object.toHaveAttribute (src/components/Grid/GridItem/GridItem.test.tsx:16:40)
Test Suites: 1 failed, 3 passed, 4 total
Tests: 1 failed, 3 passed, 4 total
Snapshots: 0 total
Time: 1.762s, estimated 2s
Ran all test suites related to changed files.
如何测试元素是否具有特定属性?
解决方案
jest-dom
toHaveAttribute
assertion在测试尝试测试prop时断言item
属性。item
item
prop 不一定会产生item
属性,并且由于它是非标准属性,因此很可能不会。
react-testing-library
propagates functional testing and asserts resulting DOM, this requires to be aware of how components work. As can be seen here, item
props results in adding a class to grid element.
All units but tested one should be mocked in unit tests, e.g.:
...
import GridItem, { OwnProps } from "./GridItem";
jest.mock("@material-ui/core/Grid", () => ({
default: props => <div data-testid="grid-item" className={props.item && item}/>
}));
Then it could be asserted as:
expect(getByTestId("grid-item")).toHaveClass("item");
推荐阅读
- vue.js - 从服务器为 Nuxt 中的 Axios 注入变量
- javascript - Node.js 路由相关
- flutter - 是否有使用 Dart grpc 的初始超时解决方案?
- sql - postgresqlExecStatement(conn, statement, ...) 中的错误:RS-DBI 驱动程序:(无法检索结果:错误:关系“分析”不存在
- kubernetes - Istio 演示配置文件中的 kiali 仪表板登录失败
- c# - 如何使用 NetworkStream.DataAvailable 属性检测 TCP 连接失败?
- c++ - C++轻量级嵌入式itoa和fptoa实现
- javascript - 如何从字符串创建 React 组件
- sql - SQL server - 如何将一列拆分为多列?
- jquery - jQuery 将类添加到下一个或上一个图像——只工作一次?