J. *_*ers 5 unit-testing typescript reactjs jestjs react-testing-library
我正在使用 TypeScript 编写一个 React 应用程序。我使用material-ui作为我的组件，使用react-testing-library作为我的单元测试。
\n\n我正在为 Material-ui 的 Grid 组件编写一个包装器，以便我始终拥有一个容器。
\n\nimport Grid from "@material-ui/core/Grid";\nimport withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";\nimport React, { PureComponent } from "react";\nimport styles from "./styles";\n\nexport interface OwnProps {\n className?: string;\n}\n\nexport interface Props extends WithStyles<typeof styles>, OwnProps {}\n\nexport interface DefaultProps {\n className: string;\n}\n\nexport class GridContainer extends PureComponent<Props & DefaultProps> {\n static defaultProps: DefaultProps = {\n className: ""\n };\n\n render() {\n const { classes, children, className, ...rest } = this.props;\n return (\n <Grid\n data-testid="grid-container"\n container={true}\n {...rest}\n className={classes.grid + " " + className}\n >\n {children}\n </Grid>\n );\n }\n}\n\nexport default withStyles(styles)(GridContainer);\n我想编写一个测试来检查它的子项是否正确呈现。这是我写的：
\n\nimport "jest-dom/extend-expect";\nimport React from "react";\nimport { cleanup, render } from "react-testing-library";\nimport GridContainer, { OwnProps } from "./GridContainer";\nafterEach(cleanup);\n\nconst createTestProps = (props?: object): OwnProps => ({\n ...props\n});\n\ndescribe("GridContainer", () => {\n const props = createTestProps();\n const { getByTestId } = render(\n <GridContainer {...props}>\n <div data-testid="child" />\n </GridContainer>\n );\n const container = getByTestId("grid-container");\n describe("rendering", () => {\n test("it renders it\'s children", () => {\n expect(container.children.length).toBe(1);\n expect(getByTestId("child")).toBeDefined();\n });\n });\n});\n问题是测试的第一部分，我检查孩子们通过的时间长度。但expect(getByTestId("child")).toBeDefined();失败了：
\xe2\x97\x8f GridContainer \xe2\x80\xba rendering \xe2\x80\xba it renders it\'s children\n\n Unable to find an element by: [data-testid="child"]\n\n <body />\n\n 24 | test("it renders it\'s children", () => {\n 25 | expect(container.children.length).toBe(1);\n > 26 | expect(getByTestId("child")).toBeDefined();\n | ^\n 27 | });\n 28 | });\n 29 | });\n\n at getElementError (node_modules/dom-testing-library/dist/query-helpers.js:30:10)\n at getAllByTestId (node_modules/dom-testing-library/dist/queries.js:231:45)\n at firstResultOrNull (node_modules/dom-testing-library/dist/query-helpers.js:38:30)\n at getByTestId (node_modules/dom-testing-library/dist/queries.js:241:42)\n at Object.getByTestId (src/components/Grid/GridContainer/GridContainer.test.tsx:26:14)\n是否无法为渲染函数中的元素提供 data-testid？我如何测试孩子们是否正确渲染？
\n\n编辑\n这是调试的输出：
\n\n\xe2\x97\x8f Console\n\n console.log node_modules/react-testing-library/dist/index.js:57\n <body>\n <div>\n <div\n class="MuiGrid-container-2 GridContainer-grid-1 "\n data-testid="grid-container"\n >\n <div\n data-testid="child"\n />\n </div>\n </div>\n </body>\n问题是你在describe块中渲染一次。这可能并不像你想的那样。describe不在 a test（或其他笑话函数，如）内的代码块beforeEach会被 Jest 提前运行。一般来说，您永远不想在describe块内而是在test（或其他玩笑函数）之外有任何代码。
您可以在 a 中渲染组件beforeEach，也可以在每个测试中调用一个渲染辅助函数。
我用上述方法在这里分叉了你的沙箱，两个测试现在都通过了： https: //codesandbox.io/s/v3wk1vlx3l
| 归档时间： |
|
| 查看次数： |
19445 次 |
| 最近记录： |