问题标签 [react-testing-library]

我有一个呈现自定义checkboxes 列表的页面。每个checkbox看起来都是这样的。

我希望能够checkbox在测试时找到一个特定的。checkboxes 的标签不同（当前使用和键/单击处理程序实现）span。

我想测试点击标签时，图像应该改变。

假设用户点击checkbox1标签“checkbox1”，图像应该从“复选框选中”变为“复选框未选中”

我在尝试引用checkbox具有特定标签的 a 时遇到问题。

如果我这样做getByText("checkbox1")，它会返回span元素，并且我没有对实际的引用checkbox来断言图像是否已更改。

我现在的解决方法是 togetAllByRole然后filter(item => item.textContext === "checkbox1")然后queryByAltText。

有没有更好的方法来测试这个？

我正在尝试使用呈现 HTML5 画布的 React 组件进行图像快照测试（即，未模拟）。我正在使用 Jest、React 测试库、Node Canvas、Puppeteer 和 Jest Image Snapshot。

给定以下 React 组件render()：

以下是 Jest 测试的样子：

但是，此测试会生成一个空白的白色 800x600 PNG 图像作为基线。

但是，如果我将测试更改为：

它基于我的 React 组件生成基线 PNG 快照就好了。

我目前正在尝试调试管道中出现问题的地方。

我是测试新手，我想了解是否可以测试从组件调度的 API 调用。是否可以等待服务器的响应？

我正在使用 react-testing-library 测试一个 react Material UI Menu 组件，该组件带有一个onClose在菜单失去焦点时触发的道具。即使我向菜单外部的组件添加单击或将焦点添加到外部的输入元素，我也无法触发此状态。

测试代码

我也试过fireEvent.click(getByTestId('other'));没有成功。

酶的这个问题有一个解决方案tree.find(Menu).simulate("close");，但我认为这是不可能的react-testing-library。

我正在从使用切换enzyme到react-testing-library测试我的组件。

我有一个简单的组件CustomModal，它的作用很像 from 的包装Modal器reactstrap。我正在尝试测试我是否CustomModal包含它应该包含的子元素。

从这篇文章和这篇文章中得到启发，我正在data-testid为我的孩子添加属性，然后我正在使用getByTestIdand queryByTestId。但是，由于某种原因，我的查询没有找到据我所知存在的子节点。

我在测试设置中做错了什么，还是我误解了react-testing-library应该如何使用？

可以在此 CodeSandbox 中找到基本代码以及测试（失败）：

我的基本CustomModal组件如下所示：

我的测试文件如下所示：

尝试使用react-testing-libraryto test时遇到一个奇怪的错误React.Suspense。该错误只是说“不支持”，但没有对问题提供任何真正的洞察力。我遵循了Kent Dodds 在 youtube 上所做的示例。

我在这里 github 上发布了我的问题的完整代码，但这里是测试代码的快照：

I am completely new to both react and testing and am a bit stumped. I was just wondering if someone could tell me why my test fails. I assume I making a basic mistake in how this should work. I am trying to test a log in page. At the moment I am just trying to get my test to fire an onclick from a button and check that that a function has been called.

The log in component code can be seen below.

My current test which fails.

render当我是未定义的

进入我们的项目。似乎在这里提出了同样的问题，但没有解决。

如果我

我得到了一个大对象x，所以库在那里

在简单的设置下一切正常，但是在尝试将其用于我们现有的项目时，导入是未定义的。

我正在使用反应测试库。在文件中它说

请注意，将其用作按类或 id 查询的逃生舱口是一种不好的做法，因为用户无法看到或识别这些属性。如果必须，请使用 testid。

我想知道为什么这是一个不好的做法。我不想用 data-testid 乱扔我的代码。我的组件中已经有 ids 和 classNames。为什么不建议使用它们？

谢谢。

我目前正在使用 typescript 制作一个 react 应用程序，并且正在使用 react-testing-library 进行测试。该应用程序与ReferenceError: jest is not defined. 我所有的测试都通过了。

以前，一切正常。唯一改变的是我重新组织了一些文件。

代码：