React测试库:测试属性/属性 [英] React testing library: Test attribute / prop
问题描述
我正在使用TypeScript编写React应用.我将material-ui用于组件,将react-testing-library用于单元测试.
I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests.
我正在为material-ui的Grid组件编写一个包装器,这样我总是有一个项目.
I'm writing a wrapper for material-ui's Grid component so that I always have an item.
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}
是否可用的单元测试.我试图像这样使用帮助程序库jest-dom的toHaveAttribute
:
I want to write a unit test that checks if item={true}
. I tried to use the helper library jest-dom's toHaveAttribute
like this:
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");
});
});
});
但是此测试失败并显示:
But this test fails with:
● 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.
如何测试元素是否具有特定属性?
How can I test if an element has a certain attribute?
推荐答案
jest-dom
toHaveAttribute
断言在测试尝试测试item
prop <时断言item
属性 /em>.
jest-dom
toHaveAttribute
assertion asserts item
attribute while the test tries to test item
prop.
item
道具不一定会导致item
属性,并且由于它是非标准属性,因此很可能不会.
item
prop won't necessarily result in item
attribute, and since it's non-standard attribute it most probably won't.
react-testing-library
传播功能测试并声明结果DOM,这需要了解组件的工作方式.可以看到
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}/>
}));
然后可以将其声明为:
expect(getByTestId("grid-item")).toHaveClass("item");
这篇关于React测试库:测试属性/属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!