我正在使用 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 GridContainer extends PureComponent<Props & DefaultProps> {
static defaultProps: DefaultProps = {
className: ""
};
render() {
const { classes, children, className, ...rest } = this.props;
return (
<Grid
data-testid="grid-container"
container={true}
{...rest}
className={classes.grid + " " + className}
>
{children}
</Grid>
);
}
}
export default withStyles(styles)(GridContainer);
我想编写一个测试来检查它的孩子是否正确呈现。这是我写的:
import "jest-dom/extend-expect";
import React from "react";
import { cleanup, render } from "react-testing-library";
import GridContainer, { OwnProps } from "./GridContainer";
afterEach(cleanup);
const createTestProps = (props?: object): OwnProps => ({
...props
});
describe("GridContainer", () => {
const props = createTestProps();
const { getByTestId } = render(
<GridContainer {...props}>
<div data-testid="child" />
</GridContainer>
);
const container = getByTestId("grid-container");
describe("rendering", () => {
test("it renders it's children", () => {
expect(container.children.length).toBe(1);
expect(getByTestId("child")).toBeDefined();
});
});
});
问题是测试的第一部分,我检查孩子通过的长度。但是expect(getByTestId("child")).toBeDefined();
失败了:
● GridContainer › rendering › it renders it's children
Unable to find an element by: [data-testid="child"]
<body />
24 | test("it renders it's children", () => {
25 | expect(container.children.length).toBe(1);
> 26 | expect(getByTestId("child")).toBeDefined();
| ^
27 | });
28 | });
29 | });
at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)
at getAllByTestId (node_modules/dom-testing-library/dist/queries.js:231:45)
at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)
at getByTestId (node_modules/dom-testing-library/dist/queries.js:241:42)
at Object.getByTestId (src/components/Grid/GridContainer/GridContainer.test.tsx:26:14)
不能给渲染函数中的元素提供 data-testid 吗?我如何测试孩子们是否正确渲染?
编辑 这是调试的输出:
● Console
console.log node_modules/react-testing-library/dist/index.js:57
<body>
<div>
<div
class="MuiGrid-container-2 GridContainer-grid-1 "
data-testid="grid-container"
>
<div
data-testid="child"
/>
</div>
</div>
</body>