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

Question

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

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

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

getByLabelText('Locale').checked = true

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

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

断言这一点的正确方式是什么？

当我单击复选框时，它会将我对象中的两个属性更新为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‘的节点是什么？因为如果它有style 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}
    />)