javascript - 你如何检查 react 测试库中的复选框？

Question

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

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

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

getByLabelText('Locale').checked = true

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

代码按预期工作但测试在第二个 expect block 上失败说:它应该仍然是 display: none

断言的正确方法是什么？

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

我觉得我需要做一些类似setProps

的事情

我现在尝试使用 renderWithRedux 但它似乎没有正确触发我的 action creator？

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

Answer 1

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

this should probably be documented better, but with checkboxes you don't actually fire change events, you should fire click events instead.

但是，根据您上面编写的代码，带有标签文本“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')
})

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