问题标签 [react-testing-library]

我似乎无法解决我收到此错误的原因：这是我的配置：

我在页面上评论了一个开放的GH 问题react-testing-library。提前致谢

我似乎找不到关于我想要实现的这个非常简单的事情的太多/任何文档

我有一个下拉菜单display: none。当我单击一个复选框时，display: block 我想要断言的只是当我单击该复选框时，它会显示下拉列表

代码按预期工作，但测试在第二个期望块上失败说：它仍然应该是display: none

是断言的正确方法吗？

当我单击复选框时，它会更新我的对象中的 2 个属性，true这就是它在代码中呈现的方式。当我手动通过这些属性时，测试仍然失败，但它在第一个期望中失败了。

我觉得我需要做类似的事情setProps

我现在尝试使用renderWithRedux，但它似乎没有正确触发我的动作创建者？

fireEvent.click(queryByTestId('LocaleCheckbox'))尝试更新复选框是最好的选择吗？

我正在使用 react-testing-library 测试我的组件，并且测试效果很好。我只是无法摆脱这个警告，fireEvent 应该被包装在开箱即用的行为中，但我试图再次包装它并没有帮助。

这是我的测试用例。

这是警告

我正在尝试使用react-testing-library 测试Select 组件onChange的事件。

我使用getByTestId效果很好的元素，然后设置元素的值，然后调用fireEvent.change(select);，但onChange从未调用过，状态也从未更新。

我尝试过使用 select 组件本身以及获取对底层input元素的引用，但都不起作用。

有什么解决办法吗？或者这是一个已知问题？

我正在尝试测试一个组件，该组件使用 React Loadable 呈现几个异步导入的子项，例如 Modal。我的测试看起来像这样

测试给出了一个不是很有帮助的错误，如下所示

我根本找不到有关此错误的信息。任何人都可以在这里阐明一下吗？

在此先感谢您的时间！

我正在建立一个博客页面，它有一个Sidebar和一个Posts组件，两者都经过单元测试，以检查它们是否呈现了 props 传递的正确数据（两者都是纯组件）。

我必须创建一个名为的包装组件，BlogLayout因为我在某些时候重复了一些代码。BlogLayout接收帖子和类别作为道具，然后将传递给Sidebar和Posts组件，并使用一些样式渲染两个组件。

问题是：我不知道我应该如何测试BlogLayout组件。它的全部目的是只将收到的道具传递给Sidebar和Posts组件（它将类别和帖子作为道具传递）。

我对这种情况的观点和问题：

• 如果我测试是否BlogLayout呈现类别和帖子（作为 UI 数据），我只会重复我在两个组件中进行的完全相同的测试。无论如何我应该这样做吗？

• 如果我考虑不测试它，因为它只是重复的代码，如果我不将这些道具传递给组件，我可能会遇到问题。它们将作为单元工作，但不会在应用程序中一起工作。

• 我对此的解决方案是进行单元测试BlogLayout以仅检查它是否将正确的道具传递给子组件。这样我会有一个更简单的测试，因为知道 props 是传递下来的，我可以完全确定子组件会正确处理它，因为它们已经过测试。那可能吗？

我正在react-testing-library用于测试。

非常感谢任何帮助我获得最佳解决方案的贡献，我远不是一个有经验的测试开发人员，所以我可能在这里对它们有一些错误的想法。

非常感谢！

我有一个<InputSearch/>组件作为包装器，当用户按下时<input type="search">接收onSearch道具作为回调enter。我如何测试回调是否会被 react-testing-library 调用？

我要测试的组件：

我努力了：

测试结果：

tldr; fireEvent.change 有效，但在提交表单时，在提交处理程序中找不到新值。

假设我们有一个简单的形式：

以及断言表单提交值是否准确的测试：

以下是测试结果：

这是我的版本：

如何获取表单handleSubmit 值以反映onChange 后的新输入值？

目前，如果我做类似const input = getByLabelText('Checked');输入的类型是 HTMLElement。

但是，如果我尝试做类似的事情，expect(input.checked).toBe(true);或者input.valuetypescript 会因为它不是 type 而感到难过HTMLInputElement。我想知道我是否遗漏了什么或者类型需要添加一个泛型来做类似的事情getByLabelText<HTMLInputElement>()

几乎所有关于设置焦点的文章和示例都使用输入元素进行了解释。它适用于输入元素，但如何使用 React useRef 和 useEffect 挂钩将焦点设置到 div 元素？

如何使用toHaveFocusreact -testing-library 对其进行测试？