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

Question

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

我有一个下拉菜单 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')) 是尝试更新复选框的最佳选择吗？

原文由 Red Baron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要使用 react-testing-library 选中或取消选中复选框，您只需 fireEvent.click 复选框。 在 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')
})

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

原文由 Alvin S. Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

这是获取 getByTestId 的代码：

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

原文由 Douglas Caina 发布，翻译遵循 CC BY-SA 4.0 许可协议