reactjs - 如何在反应测试库中测试 select 语句的值

Question

我有一个组件，它根据其角色从名称数组中获取主要名称，然后将它们创建为 select 语句中的选项。该字段是必需的，我想测试该字段中的值。

我正在使用反应测试库来做到这一点，但伙计，我是这个东西的新手。在下面查看我的代码，基本上我想知道如何从 select 语句中获取一个值来断言它。教一个人如何钓鱼的人的奖励积分，你们如何检查当前测试中的值，您是否有控制台记录您使用 get 命令的元素的方法？

这是我的测试代码：

这是组件的代码：

这些选项只是人名的随机值，一旦创建该函数，将没有默认的空白选项，它会自动选择第一个值

标签： reactjsreact-testing-libraryreact-typescript

Answer 1

我认为这是一个非常具体的案例，我们无法在代码盒中重现，因为我们没有您的组件和逻辑。

但是，有一些问题浮现在脑海中，可能会对您有所帮助。

我看到您在输入中触发了更改事件，然后是模糊，然后是单击。您可能可以使用该user-event库并使用userEvent.typeanduserEvent.click来模拟用户行为。这可以帮助你摆脱这种模糊，你的测试会更清晰。

该await getBy...查询没有意义，因为 getBy 是一个同步查询，您只需要使用awaitwith findBy 查询即可。

我不明白测试应该测试什么。查询 innerHTML 中的文本可以通过不同的方式完成，expect(x).toHaveTextContent('myText')或者如果您想在另一个可以使用的元素中查询within，可以执行以下操作：within(getByLabelText('Main Contact')).getByText('hello').

在测试下拉列表中的值时，此within功能非常有用，因此您无需查询整个屏幕，而是仅查询特定元素。