个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 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();
});
});
});
问题是测试的第一部分，我检查 children 通过的时间长度。但是 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？我如何测试 children 是否正确渲染？
编辑这是调试的输出:
● 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>
最佳答案
问题是您在 describe block 中渲染一次。这可能并不像你想的那样。不在 test 内的 describe block 中的代码(或其他 jest 函数，如 beforeEach)会被 Jest 提前运行。一般来说，您永远不希望在 describe block 内但在 test (或其他 Jest 函数)之外有任何代码。
您可以在 beforeEach 中渲染组件，或者在每个测试中调用一个渲染辅助函数。
我用上述方法在这里 fork 了你的沙箱，现在两个测试都通过了:https://codesandbox.io/s/v3wk1vlx3l
关于reactjs - React 测试库 : Test if children are passed/rendered correctly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53133125/
26
4
0
假设我想在存储在变量中的特定表中导航。 我想在表的 thead 中找到 tr 中的所有输入。 如果我有表的 ID，我会这样做 - $('#mytable thead tr input') 但是假设我已
我是 React 新手，我正在尝试了解一般语法的工作原理，但不确定在这里提问是否合适。以下是我的一个简单标题组件的代码。 export default class Title extends Comp
我正在尝试实现在树结构中获取 child 的 child 的可能性。 这是我想要的例子。 到目前为止我做了什么。 class Children(list): def __init__(self
我一直在尝试让它工作一段时间，但不确定如何执行以下操作。我的表单组件有包含常规 html 标记和输入的子组件。如果 child 是输入，我想添加 attachToForm 和 detachFromFo
在本文档中 https://flutter.dev/docs/development/ui/layout#nesting-rows-and-columns 他们使用 children : 但是在 An
即使我只向表中添加一项内容，我似乎也无法弄清楚为什么会显示重复的子项添加错误。 有 3 个主要类: WindowTease:加载舞台并调用 loadTable() 方法 InventoryContro
我一直在查看以前提出的问题，但似乎找不到适合我的情况的解决方案... 我希望能够循环遍历所有 child 和 child 的 child 等等...... 设计中的标记看起来与此类似
这个问题在这里已经有了答案: How can I use jQuery methods on elements accessed by brackets notation? (2 个答案) 关闭 5
我有一个场景，我知道我正在寻找的 div 恰好是两层深。 使用效率是否更高: $('#mydiv').find('.myselector') 或 $('#mydiv').children().chil
我今天有一个很奇怪的问题:我有一个水平显示一些缩略图的 RecyclerView，我使用 smoothScrollToPosition 导航到我需要的项目，但我注意到一个问题:它不会滚动到最后一项。进
只有 JS，没有 Jquery。 如何获取容器的所有子节点，然后为每个子节点获取子节点？ 我不想将 ID 添加到作为网格行子级的每个包装器，我尝试使用“this”或此索引进行定位。该脚本应该是动态的，
任务:在“注释”类的任何段落内的有序列表中强调强调的文本。这是我目前所拥有的... .note>p>ol>em{text-decoration:underline;} 我正在努力让它继续下去。我的代码
我有两个类如下: --- CSS: .shw-intro { width: 250px; height: 150px; background: rgb(95, 190, 0);
当前的 Firebase 数据库结构: 我要实现的目标: 在我所有位置的任何“促销”子项中搜索等于某物的优惠券。 如果找到，将其“limit”参数减少 -1 来更新它 我当前的代码: mDat
我有一个 html 表，想要获取所有行。但是，在 DebugElement 或 NativeElement 上调用 .children 会返回不同的顺序。 我的 table : 1
我在使用 Element.children 时注意到一个奇怪的问题并且似乎没有找到好的解决方法。 示例 1(预期行为) 拿这个 HTML: 还有这个 JS const formElem
目标是选择任何后代 - 无论直系后代指示如何 - 但不选择他们的 child 。换句话说，如果我从文档中搜索，我希望找到目标选择器未包含的所有子元素: test t
当我尝试执行 ParentNode.children 时，显示无法读取未定义的属性“children”。尝试让父节点的所有子节点的背景颜色为粉红色。 现在，我有一个以半小时为增量的表格，根据上午 8
我不确定这是否可行，但这是我想在 Reactjs 中实现的目标: 所以我想做的是，我想使用 React.cloneElement API 将 Comp1 组件的 pro
更新:我在另一台安装更干净的机器上试过这个。我无法在那台机器上重现这个。如果我发现是什么有问题的 (VSStudio) 组件导致了这种情况，我会告诉你的。 我从后面的代码创建了一些 UIElement
我是一名优秀的程序员,十分优秀！