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

Question

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

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

这是我的测试代码：

这是组件的代码：

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

Answer 1

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

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

我看到您在输入中触发了一个更改事件，然后是模糊，然后是点击。您可能可以使用user-event 库并使用userEvent.type 和userEvent.click 来模拟用户行为。这可以帮助您消除这种模糊，并且您的测试会更加清晰。

await getBy... 查询没有意义，因为 getBy 是一个同步查询，您只需将 await 与 findBy 查询一起使用。

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

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