Javascript 如何在react测试库中选中复选框？

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

我有一个下拉列表是

display:none

。单击复选框时，它将变为

display:block

我试图断言的是，当我单击复选框时，它会显示下拉列表

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

getByLabelText('Locale').checked = true

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

代码按预期工作，但第二个expect块的测试失败，该块表示：它仍应为

display:none

这种说法正确吗

当我单击复选框时，它会将对象中的2个属性更新为

true

，这就是它在代码中呈现的方式。当我手动通过这些属性时，测试仍然失败，但在第一个预期中失败了

我觉得我需要做一些像

setProps

我现在尝试使用

renderWithRedux

，但它似乎没有正确地触发我的动作创建者

---

是

fireEvent。单击（queryByTestId（'LocalECECKBox'））

尝试更新复选框的最佳方法？

要使用

反应测试库选中或取消选中复选框，只需
fireEvent。单击复选框。有一次。特别是，肯特说：

可能应该更好地记录这一点，但是使用复选框，您实际上不会触发更改事件，而是应该触发单击事件

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

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

还有一个
react测试库
test，演示如何断言样式，选中复选框，然后断言已更改的样式

测试代码如下所示：

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')
})

it（'checked/unchecked'时更改div的样式，（）=>{
const{getByTestId}=render（）
const checkbox=getByTestId（checkbox\u ID）
const div=getByTestId（div\u ID）
expect（选中复选框）。toEqual（false）
expect（div.style['display']）.toEqual（'none'）
fireEvent.单击（复选框）
expect（选中复选框）。toEqual（true）
expect（div.style['display']）.toEqual（'block'））
fireEvent.单击（复选框）
expect（选中复选框）。toEqual（false）
expect（div.style['display']）.toEqual（'none'）
})

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

我使用的是
反应测试渲染器“^17.0.2”
。我通过一个简单的例子也做到了这一点：

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

这是获取
getByTestId
的代码：

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

const{getByTestId}=render（）
对不起，让我解释清楚。我有一个始终可见的复选框，选中或取消选中它，会导致它旁边的下拉列表显示或隐藏。i、 e.选中==显示块，未选中==显示：无。当我单击复选框时，它会向redux存储触发一个操作，将参数更改为false或true。组件代码然后使用redux状态显示或不显示该组件。这有意义吗？我正在尝试测试，当我单击复选框时，下拉列表显示或不显示，并且它看起来不像是在测试代码中触发我的操作？当您执行
getByLabelText（“区域设置”）
时，您是在谈论下拉列表还是复选框？因为您的测试代码在样式断言和检查/取消选中时都引用了它。这似乎不对。您是否有可能在代码沙箱或其他地方对代码进行更全面的检查？