您如何在react-testing-library中选中一个复选框？

Question

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

我的下拉列表为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，但是它似乎不能正确触发我的动作创建者？

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

Answer 1

要使用react-testing-library选中或取消选中该复选框，您只需要将fireEvent.click选中即可。有一个discussion about this on 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')
})

希望这可以帮助您指出正确的方向。

Answer 2

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

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

这是获取getByTestId的代码：

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