你如何检查 react-testing-library 中的复选框？

Posted 2023-02-19

【中文标题】你如何检查 react-testing-library 中的复选框？

【英文标题】：How do you check a checkbox in react-testing-library?

【发布时间】：2019-08-06 06:10:41

【问题描述】：

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

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

 expect(getByLabelText('Locale')).toHaveStyle(`
  display: none;
`)

getByLabelText('Locale').checked = true

expect(getByLabelText('Locale')).toHaveStyle(`
  display: block;
`)

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

这是断言的正确方法吗？

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

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

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

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

【问题讨论】：

根据您的测试代码，在尝试更改“已选中”值之前，该复选框是不可见的。如果是display: none;，用户如何能够点击复选框？

不，下拉列表是无显示的，尽管现在是很久以前了哈。真的不记得了

【参考方案1】：

要使用react-testing-library 选中或取消选中复选框，只需fireEvent.click 复选框即可。有一个discussion about this on react-testing-library Issue #175。特别是，kentcdodds 说：

这可能应该更好地记录下来，但是对于实际上不会触发更改事件的复选框，您应该触发点击事件。

但是，根据您上面编写的代码，带有标签文本“Locale”的节点是什么？因为如果它具有样式display: none，您的用户将如何点击查看？那是错字吗？您应该在下拉列表中声明样式，但单击您的复选框。也许我看错了，但从您的代码看来，您正在同一个节点上执行所有断言和操作。这似乎不对。

我编写了一个 CodeSandbox 示例，它有一个基本的div，其样式根据是否选中复选框设置为display: none 或display:block。它使用react-hooks 来维护状态。

还有一个react-testing-library 测试演示了对样式进行断言，选中复选框，然后断言更改的样式。

测试代码如下所示：

it('changes style of div as checkbox is checked/unchecked', () => 
  const  getByTestId  = render(<MyCheckbox />)
  const checkbox = getByTestId(CHECKBOX_ID)
  const div = getByTestId(DIV_ID)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(true)
  expect(div.style['display']).toEqual('block')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
)

希望这有助于为您指明正确的方向。

【讨论】：

对不起，让我解释一下。我有一个始终可见的复选框，选中和取消选中它会导致显示或隐藏它旁边的下拉菜单。即检查==显示块，未检查==显示：无。当我单击复选框时，它会触发 redux 存储的操作，将参数更改为 false 或 true。然后组件代码使用 redux 状态来显示或不显示该组件，这有意义吗？我正在尝试测试，当我单击复选框时，是否显示下拉列表

在测试代码中似乎没有触发我的操作？

当您执行getByLabelText('Locale') 时，您是在谈论下拉菜单还是复选框？因为您的测试代码在样式断言和检查/取消检查时都引用了它。这似乎不对。您是否有机会拥有 CodeSandbox 或其他可以更全面地审查您的代码的地方？

【参考方案2】：

我正在使用 "react-test-renderer": "^17.0.2"。我已经设法用一个简单的方法做到了：

getByTestId("data-testid").click()

这是获取getByTestId的代码：

const getByTestId = render(<Checkbox
        onClose=jest.fn()
        onSave=onSave
    />)