如何选中反应测试库中的复选框？

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

我有一个下拉菜单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但它似乎没有正确地触发我的动作创建者？

is fireEvent.click(queryByTestId('LocaleCheckbox'))尝试更新复选框的最佳方法是什么？

要选中或取消选中复选框，请使用react-testing-library，你只是想fireEvent.click复选框。有一个关于 React-testing-library Issue #175 的讨论 https://github.com/kentcdodds/react-testing-library/issues/175。肯特多兹特别指出：

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

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

我编写了一个 CodeSandbox 示例，其中有一个基本的div样式设置为display: none or 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')
})

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