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

Question

我似乎找不到 much/any 关于我正在努力实现的这个非常简单的事情的文档

我有一个下拉列表 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.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')
})

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

Answer 2

我正在使用 "react-test-renderer": "^17.0.2"。我设法用一个简单的方法做了同样的事情：

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

这是获取 getByTestId:

的代码

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

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

How do you check a checkbox in react-testing-library?

javascript

reactjs

react-testing-library